@font-face { font-family: "mastodon-font-sans-serif"; src: local("Roboto Italic"), url(roboto-italic-webfont.woff2) format("woff2"), url(roboto-italic-webfont.woff) format("woff"), url(roboto-italic-webfont.ttf) format("truetype"), url(roboto-italic-webfont.svg#roboto-italic-webfont) format("svg"); font-weight: 400; font-style: italic } @font-face { font-family: "mastodon-font-sans-serif"; src: local("Roboto Bold"), url(roboto-bold-webfont.woff2) format("woff2"), url(roboto-bold-webfont.woff) format("woff"), url(roboto-bold-webfont.ttf) format("truetype"), url(roboto-bold-webfont.svg#roboto-bold-webfont) format("svg"); font-weight: 700; font-style: normal } @font-face { font-family: "mastodon-font-sans-serif"; src: local("Roboto Medium"), url(roboto-medium-webfont.woff2) format("woff2"), url(roboto-medium-webfont.woff) format("woff"), url(roboto-medium-webfont.ttf) format("truetype"), url(roboto-medium-webfont.svg#roboto-medium-webfont) format("svg"); font-weight: 500; font-style: normal } @font-face { font-family: "mastodon-font-sans-serif"; src: local("Roboto"), url(roboto-regular-webfont.woff2) format("woff2"), url(roboto-regular-webfont.woff) format("woff"), url(roboto-regular-webfont.ttf) format("truetype"), url(roboto-regular-webfont.svg#roboto-regular-webfont) format("svg"); font-weight: 400; font-style: normal } @font-face { font-family: "mastodon-font-monospace"; src: local("Roboto Mono"), url(robotomono-regular-webfont.woff2) format("woff2"), url(robotomono-regular-webfont.woff) format("woff"), url(robotomono-regular-webfont.ttf) format("truetype"), url(robotomono-regular-webfont.svg#roboto_monoregular) format("svg"); font-weight: 400; font-style: normal } @font-face { font-family: mastodon-font-display; src: local("Montserrat"), url(Montserrat-Regular.woff2) format("woff2"), url(Montserrat-Regular.woff) format("woff"), url(Montserrat-Regular.ttf) format("truetype"); font-weight: 400; font-style: normal } @font-face { font-family: mastodon-font-display; src: local("Montserrat Medium"), url(Montserrat-Medium.ttf) format("truetype"); font-weight: 500; font-style: normal } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none } table { border-collapse: collapse; border-spacing: 0 } html { scrollbar-color: #313543 rgba(0, 0, 0, .1) } ::-webkit-scrollbar { width: 12px; height: 12px } ::-webkit-scrollbar-thumb { background: #313543; border: 0 #fff; border-radius: 50px } ::-webkit-scrollbar-thumb:hover { background: #353a49 } ::-webkit-scrollbar-thumb:active { background: #313543 } ::-webkit-scrollbar-track { border: 0 #fff; border-radius: 0; background: rgba(0, 0, 0, .1) } ::-webkit-scrollbar-track:active, ::-webkit-scrollbar-track:hover { background: #282c37 } ::-webkit-scrollbar-corner { background: transparent } body { font-family: "mastodon-font-sans-serif", sans-serif; background: #ffffff; /* oloturia background */ font-size: 13px; line-height: 18px; font-weight: 400; color: #fff; text-rendering: optimizelegibility; font-feature-settings: "kern"; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent } body.system-font { font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, "mastodon-font-sans-serif", sans-serif } body.app-body { padding: 0 } body.app-body.layout-single-column { height: auto; min-height: 100vh; overflow-y: scroll } body.app-body.layout-multiple-columns { position: absolute; width: 100%; height: 100% } body.app-body.with-modals--active { overflow-y: hidden } body.lighter { background: #282c37 } body.with-modals { overflow-x: hidden; overflow-y: scroll } body.with-modals--active { overflow-y: hidden } body.player { padding: 0; margin: 0; position: absolute; width: 100%; height: 100%; overflow: hidden } body.player>div { height: 100% } body.player .video-player video { width: 100%; height: 100%; max-height: 100vh } body.player .media-gallery { margin-top: 0; height: 100%!important; border-radius: 0 } body.player .media-gallery__item { border-radius: 0 } body.embed { background: #313543; margin: 0; padding-bottom: 0 } body.embed .container { position: absolute; width: 100%; height: 100%; overflow: hidden } body.admin { background: #1f232b; padding: 0 } body.error { position: absolute; text-align: center; color: #9baec8; background: #282c37; width: 100%; height: 100%; padding: 0; display: flex; justify-content: center; align-items: center } body.error .dialog { vertical-align: middle; margin: 20px } body.error .dialog__illustration img { display: block; max-width: 470px; width: 100%; height: auto; margin-top: -120px } body.error .dialog h1 { font-size: 20px; line-height: 28px; font-weight: 400 } button { font-family: inherit; cursor: pointer } button:focus { outline: none } .app-holder, .app-holder>div, .app-holder>noscript { display: flex; width: 100%; align-items: center; justify-content: center; outline: 0!important } .app-holder>noscript { height: 100vh } .layout-single-column .app-holder, .layout-single-column .app-holder>div { min-height: 100vh } .layout-multiple-columns .app-holder, .layout-multiple-columns .app-holder>div { height: 100% } .app-holder noscript, .error-boundary { flex-direction: column; font-size: 16px; font-weight: 400; line-height: 1.7; color: #e25169; text-align: center } .app-holder noscript>div, .error-boundary>div { max-width: 500px } .app-holder noscript p, .error-boundary p { margin-bottom: .85em } .app-holder noscript p:last-child, .error-boundary p:last-child { margin-bottom: 0 } .app-holder noscript a, .error-boundary a { color: #2b90d9 } .app-holder noscript a:active, .app-holder noscript a:focus, .app-holder noscript a:hover, .error-boundary a:active, .error-boundary a:focus, .error-boundary a:hover { text-decoration: none } .app-holder noscript__footer, .error-boundary__footer { color: #606984; font-size: 13px } .app-holder noscript__footer a, .error-boundary__footer a { color: #606984 } .app-holder noscript button, .error-boundary button { display: inline; border: 0; background: transparent; color: #606984; font: inherit; padding: 0; margin: 0; line-height: inherit; cursor: pointer; outline: 0; transition: color .3s linear; text-decoration: underline } .app-holder noscript button:active, .app-holder noscript button:focus, .app-holder noscript button:hover, .error-boundary button:active, .error-boundary button:focus, .error-boundary button:hover { text-decoration: none } .app-holder noscript button.copied, .error-boundary button.copied { color: #79bd9a; transition: none } .logo-resources { display: none } article .__ns__pop2top, body .__ns__pop2top, div .__ns__pop2top { z-index: unset!important } .container-alt { width: 700px; margin: 40px auto 0 } @media screen and (max-width:740px) { .container-alt { width: 100%; margin: 0 } } .logo-container { margin: 100px auto 50px } @media screen and (max-width:500px) { .logo-container { margin: 40px auto 0 } } .logo-container h1 { display: flex; justify-content: center; align-items: center } .logo-container h1 svg { fill: #fff; height: 42px; margin-right: 10px } .logo-container h1 a { display: flex; justify-content: center; align-items: center; color: #fff; text-decoration: none; outline: 0; padding: 12px 16px; line-height: 32px; font-family: mastodon-font-display, sans-serif; font-weight: 500; font-size: 14px } .compose-standalone .compose-form { width: 400px; padding: 20px 0; margin: 40px auto 0; box-sizing: border-box } @media screen and (max-width:400px) { .compose-standalone .compose-form { width: 100%; margin-top: 0; padding: 20px } } .account-header { width: 400px; display: flex; font-size: 13px; line-height: 18px; box-sizing: border-box; padding: 20px 0 0; margin: 40px auto -30px } @media screen and (max-width:440px) { .account-header { width: 100%; margin: 0 0 10px; padding: 20px 20px 0 } } .account-header .avatar { width: 40px; height: 40px; margin-right: 8px } .account-header .avatar img { width: 100%; height: 100%; display: block; margin: 0; border-radius: 4px } .account-header .name { flex: 1 1 auto; color: #d9e1e8; width: calc(100% - 88px) } .account-header .name .username { display: block; font-weight: 500; text-overflow: ellipsis; overflow: hidden } .account-header .logout-link { display: block; font-size: 32px; line-height: 40px; margin-left: 8px } .grid-3 { display: grid; grid-gap: 10px; grid-template-columns: 3fr 1fr; grid-auto-columns: 25%; grid-auto-rows: -webkit-max-content; grid-auto-rows: max-content } .grid-3 .column-0 { grid-column: 1/3; grid-row: 1 } .grid-3 .column-1 { grid-column: 1; grid-row: 2 } .grid-3 .column-2 { grid-column: 2; grid-row: 2 } .grid-3 .column-3 { grid-column: 1/3; grid-row: 3 } @media screen and (max-width:415px) { .grid-3 { grid-gap: 0; grid-template-columns: minmax(0, 100%) } .grid-3 .column-0 { grid-column: 1 } .grid-3 .column-1 { grid-column: 1; grid-row: 3 } .grid-3 .column-2 { grid-column: 1; grid-row: 2 } .grid-3 .column-3 { grid-column: 1; grid-row: 4 } } .grid-4 { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: 25%; grid-auto-rows: -webkit-max-content; grid-auto-rows: max-content } .grid-4 .column-0 { grid-column: 1/5; grid-row: 1 } .grid-4 .column-1 { grid-column: 1/4; grid-row: 2 } .grid-4 .column-2 { grid-column: 4; grid-row: 2 } .grid-4 .column-3 { grid-column: 2/5; grid-row: 3 } .grid-4 .column-4 { grid-column: 1; grid-row: 3 } .grid-4 .landing-page__call-to-action { min-height: 100% } .grid-4 .flash-message { margin-bottom: 10px } @media screen and (max-width:738px) { .grid-4 { grid-template-columns: minmax(0, 50%) minmax(0, 50%) } .grid-4 .landing-page__call-to-action { padding: 20px; display: flex; align-items: center; justify-content: center } .grid-4 .row__information-board { width: 100%; justify-content: center; align-items: center } .grid-4 .row__mascot { display: none } } @media screen and (max-width:415px) { .grid-4 { grid-gap: 0; grid-template-columns: minmax(0, 100%) } .grid-4 .column-0 { grid-column: 1 } .grid-4 .column-1 { grid-column: 1; grid-row: 3 } .grid-4 .column-2 { grid-column: 1; grid-row: 2 } .grid-4 .column-3 { grid-column: 1; grid-row: 5 } .grid-4 .column-4 { grid-column: 1; grid-row: 4 } } @media screen and (max-width:415px) { .public-layout { padding-top: 48px } } .public-layout .container { max-width: 960px } @media screen and (max-width:415px) { .public-layout .container { padding: 0 } } .public-layout .header { background: #393f4f; box-shadow: 0 0 15px rgba(0, 0, 0, .2); border-radius: 4px; height: 48px; margin: 10px 0; display: flex; align-items: stretch; justify-content: center; flex-wrap: nowrap; overflow: hidden } @media screen and (max-width:415px) { .public-layout .header { position: fixed; width: 100%; top: 0; left: 0; margin: 0; border-radius: 0; box-shadow: none; z-index: 110 } } .public-layout .header>div { flex: 1 1 33.3%; min-height: 1px } .public-layout .header .nav-left { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap } .public-layout .header .nav-center { display: flex; align-items: stretch; justify-content: center; flex-wrap: nowrap } .public-layout .header .nav-right { display: flex; align-items: stretch; justify-content: flex-end; flex-wrap: nowrap } .public-layout .header .brand { display: block; padding: 15px } .public-layout .header .brand svg { display: block; height: 18px; width: auto; position: relative; bottom: -2px; fill: #fff } @media screen and (max-width:415px) { .public-layout .header .brand svg { height: 20px } } .public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover { background: #42485a } .public-layout .header .nav-link { display: flex; align-items: center; padding: 0 1rem; font-size: 12px; font-weight: 500; text-decoration: none; color: #9baec8; white-space: nowrap; text-align: center } .public-layout .header .nav-link:active, .public-layout .header .nav-link:focus, .public-layout .header .nav-link:hover { text-decoration: underline; color: #fff } @media screen and (max-width:550px) { .public-layout .header .nav-link.optional { display: none } } .public-layout .header .nav-button { background: #4a5266; margin: 8px 8px 8px 0; border-radius: 4px } .public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover { text-decoration: none; background: #535b72 } .public-layout .grid { display: grid; grid-gap: 10px; grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr); grid-auto-columns: 25%; grid-auto-rows: -webkit-max-content; grid-auto-rows: max-content } .public-layout .grid .column-0 { grid-row: 1; grid-column: 1 } .public-layout .grid .column-1 { grid-row: 1; grid-column: 2 } @media screen and (max-width:600px) { .public-layout .grid { grid-template-columns: 100%; grid-gap: 0 } .public-layout .grid .column-1 { display: none } } .public-layout .directory__card { border-radius: 4px } @media screen and (max-width:415px) { .public-layout .directory__card { border-radius: 0 } } @media screen and (max-width:415px) { .public-layout .page-header { border-bottom: 0 } } .public-layout .public-account-header { overflow: hidden; margin-bottom: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, .2) } .public-layout .public-account-header.inactive { opacity: .5 } .public-layout .public-account-header.inactive .avatar, .public-layout .public-account-header.inactive .public-account-header__image { -webkit-filter: grayscale(100%); filter: grayscale(100%) } .public-layout .public-account-header.inactive .logo-button { background-color: #d9e1e8 } .public-layout .public-account-header .logo-button { line-height: 36px; padding: 3px 15px } .public-layout .public-account-header__image { border-radius: 4px 4px 0 0; overflow: hidden; height: 300px; position: relative; background: #0e1014 } .public-layout .public-account-header__image:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; box-shadow: inset 0 -1px 1px 1px rgba(0, 0, 0, .15); top: 0; left: 0 } .public-layout .public-account-header__image img { -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; display: block; width: 100%; height: 100%; margin: 0; border-radius: 4px 4px 0 0 } @media screen and (max-width:600px) { .public-layout .public-account-header__image { height: 200px } } .public-layout .public-account-header--no-bar { margin-bottom: 0 } .public-layout .public-account-header--no-bar .public-account-header__image, .public-layout .public-account-header--no-bar .public-account-header__image img { border-radius: 4px } @media screen and (max-width:415px) { .public-layout .public-account-header--no-bar .public-account-header__image, .public-layout .public-account-header--no-bar .public-account-header__image img { border-radius: 0 } } @media screen and (max-width:415px) { .public-layout .public-account-header { margin-bottom: 0; box-shadow: none } .public-layout .public-account-header__image:after { display: none } .public-layout .public-account-header__image, .public-layout .public-account-header__image img { border-radius: 0 } } .public-layout .public-account-header__bar { position: relative; margin-top: -80px; display: flex; justify-content: flex-start } .public-layout .public-account-header__bar:before { content: ""; display: block; background: #313543; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; border-radius: 0 0 4px 4px; z-index: -1 } .public-layout .public-account-header__bar .avatar { display: block; width: 120px; height: 120px; padding-left: 16px; flex: 0 0 auto } .public-layout .public-account-header__bar .avatar img { display: block; width: 100%; height: 100%; margin: 0; border-radius: 50%; border: 4px solid #313543; background: #17191f } @media screen and (max-width:600px) { .public-layout .public-account-header__bar { margin-top: 0; background: #313543; border-radius: 0 0 4px 4px; padding: 5px } .public-layout .public-account-header__bar:before { display: none } .public-layout .public-account-header__bar .avatar { width: 48px; height: 48px; padding: 7px 0 7px 10px } .public-layout .public-account-header__bar .avatar img { border: 0; border-radius: 4px } } @media screen and (max-width:600px)and (max-width:360px) { .public-layout .public-account-header__bar .avatar { display: none } } @media screen and (max-width:415px) { .public-layout .public-account-header__bar { border-radius: 0 } } @media screen and (max-width:600px) { .public-layout .public-account-header__bar { flex-wrap: wrap } } .public-layout .public-account-header__tabs { flex: 1 1 auto; margin-left: 20px } .public-layout .public-account-header__tabs__name { padding-top: 20px; padding-bottom: 8px } .public-layout .public-account-header__tabs__name h1 { font-size: 20px; line-height: 27px; color: #fff; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px 1px #000 } .public-layout .public-account-header__tabs__name h1 small { display: block; font-size: 14px; color: #fff; font-weight: 400; overflow: hidden; text-overflow: ellipsis } @media screen and (max-width:600px) { .public-layout .public-account-header__tabs { margin-left: 15px; display: flex; justify-content: space-between; align-items: center } .public-layout .public-account-header__tabs__name { padding-top: 0; padding-bottom: 0 } .public-layout .public-account-header__tabs__name h1 { font-size: 16px; line-height: 24px; text-shadow: none } .public-layout .public-account-header__tabs__name h1 small { color: #9baec8 } } .public-layout .public-account-header__tabs__tabs { display: flex; justify-content: flex-start; align-items: stretch; height: 58px } .public-layout .public-account-header__tabs__tabs .details-counters { display: flex; flex-direction: row; min-width: 300px } @media screen and (max-width:600px) { .public-layout .public-account-header__tabs__tabs .details-counters { display: none } } .public-layout .public-account-header__tabs__tabs .counter { min-width: 33.3%; box-sizing: border-box; flex: 0 0 auto; color: #9baec8; padding: 10px; border-right: 1px solid #313543; cursor: default; text-align: center; position: relative } .public-layout .public-account-header__tabs__tabs .counter a { display: block } .public-layout .public-account-header__tabs__tabs .counter:last-child { border-right: 0 } .public-layout .public-account-header__tabs__tabs .counter:after { display: block; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 4px solid #9baec8; opacity: .5; transition: all .4s ease } .public-layout .public-account-header__tabs__tabs .counter.active:after { border-bottom: 4px solid #2b90d9; opacity: 1 } .public-layout .public-account-header__tabs__tabs .counter.active.inactive:after { border-bottom-color: #d9e1e8 } .public-layout .public-account-header__tabs__tabs .counter:hover:after { opacity: 1; transition-duration: .1s } .public-layout .public-account-header__tabs__tabs .counter a { text-decoration: none; color: inherit } .public-layout .public-account-header__tabs__tabs .counter .counter-label { font-size: 12px; display: block } .public-layout .public-account-header__tabs__tabs .counter .counter-number { font-weight: 500; font-size: 18px; margin-bottom: 5px; color: #fff; font-family: mastodon-font-display, sans-serif } .public-layout .public-account-header__tabs__tabs .spacer { flex: 1 1 auto; height: 1px } .public-layout .public-account-header__tabs__tabs__buttons { padding: 7px 8px } .public-layout .public-account-header__extra { display: none; margin-top: 4px } .public-layout .public-account-header__extra .public-account-bio { border-radius: 0; box-shadow: none; background: transparent; margin: 0 -5px } .public-layout .public-account-header__extra .public-account-bio .account__header__fields { border-top: 1px solid #42485a } .public-layout .public-account-header__extra .public-account-bio .roles { display: none } .public-layout .public-account-header__extra__links { margin-top: -15px; font-size: 14px; color: #9baec8 } .public-layout .public-account-header__extra__links a { display: inline-block; color: #9baec8; text-decoration: none; padding: 15px; font-weight: 500 } .public-layout .public-account-header__extra__links a strong { font-weight: 700; color: #fff } @media screen and (max-width:600px) { .public-layout .public-account-header__extra { display: block; flex: 100% } } .public-layout .account__section-headline { border-radius: 4px 4px 0 0 } @media screen and (max-width:415px) { .public-layout .account__section-headline { border-radius: 0 } } .public-layout .detailed-status__meta { margin-top: 25px } .public-layout .public-account-bio { background: #393f4f; box-shadow: 0 0 15px rgba(0, 0, 0, .2); border-radius: 4px; overflow: hidden; margin-bottom: 10px } @media screen and (max-width:415px) { .public-layout .public-account-bio { box-shadow: none; margin-bottom: 0; border-radius: 0 } } .public-layout .public-account-bio .account__header__fields { margin: 0; border-top: 0 } .public-layout .public-account-bio .account__header__fields a { color: #4ea2df } .public-layout .public-account-bio .account__header__fields dl:first-child .verified { border-radius: 0 4px 0 0 } .public-layout .public-account-bio .account__header__fields .verified a { color: #79bd9a } .public-layout .public-account-bio .account__header__content { padding: 20px 20px 0; color: #fff } .public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra { padding: 20px; font-size: 14px; color: #9baec8 } .public-layout .public-account-bio .roles { padding-bottom: 0 } .public-layout .directory__list { display: grid; grid-gap: 10px; grid-template-columns: minmax(0, 50%) minmax(0, 50%) } @media screen and (max-width:415px) { .public-layout .directory__list { display: block } } .public-layout .directory__list .icon-button { font-size: 18px } .public-layout .directory__card { margin-bottom: 0 } .public-layout .card-grid { display: flex; flex-wrap: wrap; min-width: 100%; margin: 0 -5px } .public-layout .card-grid>div { box-sizing: border-box; flex: 1 0 auto; width: 300px; padding: 0 5px; margin-bottom: 10px; max-width: 33.333% } @media screen and (max-width:900px) { .public-layout .card-grid>div { max-width: 50% } } @media screen and (max-width:600px) { .public-layout .card-grid>div { max-width: 100% } } @media screen and (max-width:415px) { .public-layout .card-grid { margin: 0; border-top: 1px solid #393f4f } .public-layout .card-grid>div { width: 100%; padding: 0; margin-bottom: 0; border-bottom: 1px solid #393f4f } .public-layout .card-grid>div:last-child { border-bottom: 0 } .public-layout .card-grid>div .card__bar { background: #282c37 } .public-layout .card-grid>div .card__bar:active, .public-layout .card-grid>div .card__bar:focus, .public-layout .card-grid>div .card__bar:hover { background: #313543 } } .no-list { list-style: none } .no-list li { display: inline-block; margin: 0 5px } .recovery-codes { list-style: none; margin: 0 auto } .recovery-codes li { font-size: 125%; line-height: 1.5; letter-spacing: 1px } .public-layout .footer { text-align: left; padding-top: 20px; padding-bottom: 60px; font-size: 12px; color: #737d99 } @media screen and (max-width:415px) { .public-layout .footer { padding-left: 20px; padding-right: 20px } } .public-layout .footer .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 2fr 1fr 1fr } .public-layout .footer .grid .column-0 { grid-column: 1; grid-row: 1; min-width: 0 } .public-layout .footer .grid .column-1 { grid-column: 2; grid-row: 1; min-width: 0 } .public-layout .footer .grid .column-2 { grid-column: 3; grid-row: 1; min-width: 0; text-align: center } .public-layout .footer .grid .column-2 h4 a { color: #737d99 } .public-layout .footer .grid .column-3 { grid-column: 4; grid-row: 1; min-width: 0 } .public-layout .footer .grid .column-4 { grid-column: 5; grid-row: 1; min-width: 0 } @media screen and (max-width:690px) { .public-layout .footer .grid { grid-template-columns: 1fr 2fr 1fr } .public-layout .footer .grid .column-0, .public-layout .footer .grid .column-1 { grid-column: 1 } .public-layout .footer .grid .column-1 { grid-row: 2 } .public-layout .footer .grid .column-2 { grid-column: 2 } .public-layout .footer .grid .column-3, .public-layout .footer .grid .column-4 { grid-column: 3 } .public-layout .footer .grid .column-4 { grid-row: 2 } } @media screen and (max-width:600px) { .public-layout .footer .grid .column-1 { display: block } } @media screen and (max-width:415px) { .public-layout .footer .grid .column-0, .public-layout .footer .grid .column-1, .public-layout .footer .grid .column-3, .public-layout .footer .grid .column-4 { display: none } } .public-layout .footer h4 { text-transform: uppercase; font-weight: 700; margin-bottom: 8px; color: #9baec8 } .public-layout .footer h4 a { color: inherit; text-decoration: none } .public-layout .footer ul a { text-decoration: none; color: #737d99 } .public-layout .footer ul a:active, .public-layout .footer ul a:focus, .public-layout .footer ul a:hover { text-decoration: underline } .public-layout .footer .brand svg { display: block; height: 36px; width: auto; margin: 0 auto; fill: #737d99 } .public-layout .footer .brand:active svg, .public-layout .footer .brand:focus svg, .public-layout .footer .brand:hover svg { fill: #7f88a2 } .compact-header h1 { font-size: 24px; line-height: 28px; color: #9baec8; font-weight: 500; margin-bottom: 20px; padding: 0 10px; word-wrap: break-word } @media screen and (max-width:740px) { .compact-header h1 { text-align: center; padding: 20px 10px 0 } } .compact-header h1 a { color: inherit; text-decoration: none } .compact-header h1 small { font-weight: 400; color: #d9e1e8 } .compact-header h1 img { display: inline-block; margin-bottom: -5px; margin-right: 15px; width: 36px; height: 36px } .hero-widget { margin-bottom: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, .2) } .hero-widget:last-child { margin-bottom: 0 } .hero-widget__img { width: 100%; position: relative; overflow: hidden; border-radius: 4px 4px 0 0; background: #000 } .hero-widget__img img { -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; display: block; width: 100%; height: 100%; margin: 0; border-radius: 4px 4px 0 0 } .hero-widget__text { background: #282c37; padding: 20px; border-radius: 0 0 4px 4px; font-size: 15px; color: #9baec8; line-height: 20px; word-wrap: break-word; font-weight: 400 } .hero-widget__text .emojione { width: 20px; height: 20px; margin: -3px 0 0 } .hero-widget__text p { margin-bottom: 20px } .hero-widget__text p:last-child { margin-bottom: 0 } .hero-widget__text em { display: inline; margin: 0; padding: 0; font-weight: 700; background: transparent; font-family: inherit; font-size: inherit; line-height: inherit; color: #bcc9da } .hero-widget__text a { color: #d9e1e8; text-decoration: none } .hero-widget__text a:hover { text-decoration: underline } @media screen and (max-width:415px) { .hero-widget { display: none } } .endorsements-widget { margin-bottom: 10px; padding-bottom: 10px } .endorsements-widget h4 { padding: 10px; text-transform: uppercase; font-weight: 700; font-size: 13px; color: #9baec8 } .endorsements-widget .account { padding: 10px 0 } .endorsements-widget .account:last-child { border-bottom: 0 } .endorsements-widget .account .account__display-name { display: flex; align-items: center } .endorsements-widget .trends__item { padding: 10px } .trends-widget h4 { color: #9baec8 } .box-widget { padding: 20px; border-radius: 4px; background: #282c37; box-shadow: 0 0 15px rgba(0, 0, 0, .2) } .placeholder-widget { padding: 16px; border-radius: 4px; border: 2px dashed #606984; text-align: center; color: #9baec8; margin-bottom: 10px } .contact-widget { min-height: 100%; font-size: 15px; color: #9baec8; line-height: 20px; word-wrap: break-word; font-weight: 400; padding: 0 } .contact-widget h4 { padding: 10px; text-transform: uppercase; font-weight: 700; font-size: 13px; color: #9baec8 } .contact-widget .account { border-bottom: 0; padding: 5px 0 10px } .contact-widget>a { display: inline-block; padding: 0 10px 10px; color: #9baec8; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .contact-widget>a:active, .contact-widget>a:focus, .contact-widget>a:hover { text-decoration: underline } .moved-account-widget { padding: 15px 15px 20px; border-radius: 4px; background: #282c37; box-shadow: 0 0 15px rgba(0, 0, 0, .2); color: #d9e1e8; font-weight: 400; margin-bottom: 10px } .moved-account-widget a, .moved-account-widget strong { font-weight: 500 } .moved-account-widget a:lang(ja), .moved-account-widget a:lang(ko), .moved-account-widget a:lang(zh-CN), .moved-account-widget a:lang(zh-HK), .moved-account-widget a:lang(zh-TW), .moved-account-widget strong:lang(ja), .moved-account-widget strong:lang(ko), .moved-account-widget strong:lang(zh-CN), .moved-account-widget strong:lang(zh-HK), .moved-account-widget strong:lang(zh-TW) { font-weight: 700 } .moved-account-widget a { color: inherit; text-decoration: underline } .moved-account-widget a.mention, .moved-account-widget a.mention:active, .moved-account-widget a.mention:focus, .moved-account-widget a.mention:hover, .moved-account-widget a.mention span { text-decoration: none } .moved-account-widget a.mention:active span, .moved-account-widget a.mention:focus span, .moved-account-widget a.mention:hover span { text-decoration: underline } .moved-account-widget__message { margin-bottom: 15px } .moved-account-widget__message .fa { margin-right: 5px; color: #9baec8 } .moved-account-widget__card .detailed-status__display-avatar { position: relative; cursor: pointer } .moved-account-widget__card .detailed-status__display-name { margin-bottom: 0; text-decoration: none } .moved-account-widget__card .detailed-status__display-name span { font-weight: 400 } .memoriam-widget { padding: 20px; background: #000; font-size: 14px; color: #9baec8; margin-bottom: 10px } .memoriam-widget, .page-header { border-radius: 4px; box-shadow: 0 0 15px rgba(0, 0, 0, .2) } .page-header { background: #393f4f; padding: 60px 15px; text-align: center; margin: 10px 0 } .page-header h1 { color: #fff; font-size: 36px; line-height: 1.1; font-weight: 700; margin-bottom: 10px } .page-header p { font-size: 15px; color: #9baec8 } @media screen and (max-width:415px) { .page-header { margin-top: 0; background: #313543 } .page-header h1 { font-size: 24px } } .directory { background: #282c37; border-radius: 4px; box-shadow: 0 0 15px rgba(0, 0, 0, .2) } .directory__tag { box-sizing: border-box; margin-bottom: 10px } .directory__tag>a, .directory__tag>div { display: flex; align-items: center; justify-content: space-between; background: #282c37; border-radius: 4px; padding: 15px; text-decoration: none; color: inherit; box-shadow: 0 0 15px rgba(0, 0, 0, .2) } .directory__tag>a:active, .directory__tag>a:focus, .directory__tag>a:hover { background: #393f4f } .directory__tag.active>a { background: #2b90d9; cursor: default } .directory__tag.disabled>div { opacity: .5; cursor: default } .directory__tag h4 { flex: 1 1 auto; font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .directory__tag h4 .fa { color: #9baec8 } .directory__tag h4 small { display: block; font-weight: 400; font-size: 15px; margin-top: 8px; color: #9baec8 } .directory__tag.active h4, .directory__tag.active h4 .fa, .directory__tag.active h4 .trends__item__current, .directory__tag.active h4 small { color: #fff } .directory__tag .avatar-stack { flex: 0 0 auto; width: 120px } .directory__tag.active .avatar-stack .account__avatar { border-color: #2b90d9 } .directory__tag .trends__item__current { padding-right: 0 } .avatar-stack { display: flex; justify-content: flex-end } .avatar-stack .account__avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; position: relative; margin-left: -10px; background: #17191f; border: 2px solid #282c37 } .avatar-stack .account__avatar:first-child { z-index: 1 } .avatar-stack .account__avatar:nth-child(2) { z-index: 2 } .avatar-stack .account__avatar:nth-child(3) { z-index: 3 } .accounts-table { width: 100% } .accounts-table .account { padding: 0; border: 0 } .accounts-table strong { font-weight: 700 } .accounts-table thead th { text-align: center; text-transform: uppercase; color: #9baec8; font-weight: 700; padding: 10px } .accounts-table thead th:first-child { text-align: left } .accounts-table tbody td { padding: 15px 0; vertical-align: middle; border-bottom: 1px solid #393f4f } .accounts-table tbody tr:last-child td { border-bottom: 0 } .accounts-table__count { width: 120px; text-align: center; font-size: 15px; font-weight: 500; color: #fff } .accounts-table__count small { display: block; color: #9baec8; font-weight: 400; font-size: 14px } .accounts-table__comment { width: 50%; vertical-align: initial!important } .accounts-table__interrelationships { width: 21px } .accounts-table .fa { font-size: 16px } .accounts-table .fa.active { color: #2b90d9 } .accounts-table .fa.passive { color: #ca8f04 } .accounts-table .fa.active.passive { color: #79bd9a } @media screen and (max-width:415px) { .accounts-table tbody td.optional { display: none } } @media screen and (max-width:415px) { .box-widget, .contact-widget, .directory, .landing-page__information.contact-widget, .memoriam-widget, .moved-account-widget, .page-header { margin-bottom: 0; box-shadow: none; border-radius: 0 } } .statuses-grid { min-height: 600px } @media screen and (max-width:640px) { .statuses-grid { width: 100%!important } } .statuses-grid__item { width: 313.3333333333px } @media screen and (max-width:1255px) { .statuses-grid__item { width: 306.6666666667px } } @media screen and (max-width:640px) { .statuses-grid__item { width: 100% } } @media screen and (max-width:415px) { .statuses-grid__item { width: 100vw } } .statuses-grid .detailed-status { border-radius: 4px } @media screen and (max-width:415px) { .statuses-grid .detailed-status { border-top: 1px solid #4a5266 } } .statuses-grid .detailed-status.compact .detailed-status__meta { margin-top: 15px } .statuses-grid .detailed-status.compact .status__content { font-size: 15px; line-height: 20px } .statuses-grid .detailed-status.compact .status__content .emojione { width: 20px; height: 20px; margin: -3px 0 0 } .statuses-grid .detailed-status.compact .status__content .status__content__spoiler-link { line-height: 20px; margin: 0 } .statuses-grid .detailed-status.compact .media-gallery, .statuses-grid .detailed-status.compact .status-card, .statuses-grid .detailed-status.compact .video-player { margin-top: 15px } .notice-widget { color: #9baec8 } .notice-widget, .notice-widget p { margin-bottom: 10px } .notice-widget p:last-child { margin-bottom: 0 } .notice-widget a { font-size: 14px; line-height: 20px } .notice-widget a, .placeholder-widget a { text-decoration: none; font-weight: 500; color: #2b90d9 } .notice-widget a:active, .notice-widget a:focus, .notice-widget a:hover, .placeholder-widget a:active, .placeholder-widget a:focus, .placeholder-widget a:hover { text-decoration: underline } .table-of-contents { background: #1f232b; min-height: 100%; font-size: 14px; border-radius: 4px } .table-of-contents li a { display: block; font-weight: 500; padding: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: #fff; border-bottom: 1px solid #313543 } .table-of-contents li a:active, .table-of-contents li a:focus, .table-of-contents li a:hover { text-decoration: underline } .table-of-contents li:last-child a { border-bottom: 0 } .table-of-contents li ul { padding-left: 20px; border-bottom: 1px solid #313543 } code { font-family: "mastodon-font-monospace", monospace; font-weight: 400 } .form-container { max-width: 400px; padding: 20px; margin: 0 auto } .simple_form.hidden { display: none } .simple_form .input { margin-bottom: 15px; overflow: hidden } .simple_form .input.hidden { margin: 0 } .simple_form .input.radio_buttons .radio { margin-bottom: 15px } .simple_form .input.radio_buttons .radio:last-child { margin-bottom: 0 } .simple_form .input.radio_buttons .radio>label { position: relative; padding-left: 28px } .simple_form .input.radio_buttons .radio>label input { position: absolute; top: -2px; left: 0 } .simple_form .input.boolean { position: relative; margin-bottom: 0 } .simple_form .input.boolean .label_input>label { font-family: inherit; font-size: 14px; padding-top: 5px; color: #fff; display: block; width: auto } .simple_form .input.boolean .hint, .simple_form .input.boolean .label_input { padding-left: 28px } .simple_form .input.boolean .label_input__wrapper { position: static } .simple_form .input.boolean label.checkbox { position: absolute; top: 2px; left: 0 } .simple_form .input.boolean label a { color: #2b90d9; text-decoration: underline } .simple_form .input.boolean label a:active, .simple_form .input.boolean label a:focus, .simple_form .input.boolean label a:hover { text-decoration: none } .simple_form .input.boolean .recommended { position: absolute; margin: -2px 4px 0 } .simple_form .row { display: flex; margin: 0 -5px } .simple_form .row .input { box-sizing: border-box; flex: 1 1 auto; width: 50%; padding: 0 5px } .simple_form .title { color: #d9e1e8; font-size: 20px; line-height: 28px; font-weight: 400; margin-bottom: 30px } .simple_form .hint { color: #9baec8 } .simple_form .hint a { color: #2b90d9 } .simple_form .hint code { border-radius: 3px; padding: .2em .4em; background: #0e1014 } .simple_form .hint li { list-style: disc; margin-left: 18px } .simple_form ul.hint { margin-bottom: 15px } .simple_form span.hint { display: block; font-size: 12px; margin-top: 4px } .simple_form p.hint { margin-bottom: 15px; color: #9baec8 } .simple_form p.hint.subtle-hint { text-align: center; font-size: 12px; line-height: 18px; margin-top: 15px; margin-bottom: 0 } .simple_form .authentication-hint { margin-bottom: 25px } .simple_form .card { margin-bottom: 15px } .simple_form strong { font-weight: 500 } .simple_form strong:lang(ja), .simple_form strong:lang(ko), .simple_form strong:lang(zh-CN), .simple_form strong:lang(zh-HK), .simple_form strong:lang(zh-TW) { font-weight: 700 } .simple_form .input.with_floating_label .label_input { display: flex } .simple_form .input.with_floating_label .label_input>label { font-family: inherit; font-size: 14px; color: #fff; font-weight: 500; min-width: 150px; flex: 0 0 auto } .simple_form .input.with_floating_label .label_input input, .simple_form .input.with_floating_label .label_input select { flex: 1 1 auto } .simple_form .input.with_floating_label.select .hint { margin-top: 6px; margin-left: 150px } .simple_form .input.with_label .label_input>label { font-family: inherit; font-size: 14px; color: #fff; display: block; margin-bottom: 8px; word-wrap: break-word; font-weight: 500 } .simple_form .input.with_label .hint { margin-top: 6px } .simple_form .input.with_label ul { flex: 390px } .simple_form .input.with_block_label { max-width: none } .simple_form .input.with_block_label>label { font-family: inherit; font-size: 16px; color: #fff; display: block; font-weight: 500; padding-top: 5px } .simple_form .input.with_block_label .hint { margin-bottom: 15px } .simple_form .input.with_block_label ul { -moz-columns: 2; column-count: 2 } .simple_form .input.datetime .label_input select { display: inline-block; width: auto; flex: 0 } .simple_form .required abbr { text-decoration: none; color: #e87487 } .simple_form .fields-group { margin-bottom: 25px } .simple_form .fields-group .input:last-child { margin-bottom: 0 } .simple_form .fields-row { display: flex; padding-top: 5px; margin: 0 -10px 25px } .simple_form .fields-row .input { max-width: none } .simple_form .fields-row__column { box-sizing: border-box; padding: 0 10px; flex: 1 1 auto; min-height: 1px } .simple_form .fields-row__column-6 { max-width: 50% } .simple_form .fields-row__column .actions { margin-top: 27px } .simple_form .fields-row .fields-group:last-child, .simple_form .fields-row .fields-row__column.fields-group { margin-bottom: 0 } @media screen and (max-width:600px) { .simple_form .fields-row { display: block; margin-bottom: 0 } .simple_form .fields-row__column { max-width: none } .simple_form .fields-row .fields-group:last-child, .simple_form .fields-row .fields-row__column, .simple_form .fields-row .fields-row__column.fields-group { margin-bottom: 25px } } .simple_form .fields-row .fields-group.invited-by { margin-bottom: 30px } .simple_form .fields-row .fields-group.invited-by .hint { text-align: center } .simple_form .input.radio_buttons .radio label { margin-bottom: 5px; font-family: inherit; font-size: 14px; color: #fff; display: block; width: auto } .simple_form .check_boxes .checkbox label { font-family: inherit; font-size: 14px; color: #fff; display: inline-block; width: auto; position: relative; padding-top: 5px; padding-left: 25px; flex: 1 1 auto } .simple_form .check_boxes .checkbox input[type=checkbox] { position: absolute; left: 0; top: 5px; margin: 0 } .simple_form .input.static .label_input__wrapper { font-size: 16px; padding: 10px; border: 1px solid #606984; border-radius: 4px } .simple_form input[type=email], .simple_form input[type=number], .simple_form input[type=password], .simple_form input[type=text], .simple_form input[type=url], .simple_form textarea { box-sizing: border-box; font-size: 16px; color: #fff; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; background: #131419; border: 1px solid #0a0b0e; border-radius: 4px; padding: 10px } .simple_form input[type=email]::-webkit-input-placeholder, .simple_form input[type=number]::-webkit-input-placeholder, .simple_form input[type=password]::-webkit-input-placeholder, .simple_form input[type=text]::-webkit-input-placeholder, .simple_form input[type=url]::-webkit-input-placeholder, .simple_form textarea::-webkit-input-placeholder { color: #a8b9cf } .simple_form input[type=email]::-moz-placeholder, .simple_form input[type=number]::-moz-placeholder, .simple_form input[type=password]::-moz-placeholder, .simple_form input[type=text]::-moz-placeholder, .simple_form input[type=url]::-moz-placeholder, .simple_form textarea::-moz-placeholder { color: #a8b9cf } .simple_form input[type=email]:-ms-input-placeholder, .simple_form input[type=number]:-ms-input-placeholder, .simple_form input[type=password]:-ms-input-placeholder, .simple_form input[type=text]:-ms-input-placeholder, .simple_form input[type=url]:-ms-input-placeholder, .simple_form textarea:-ms-input-placeholder { color: #a8b9cf } .simple_form input[type=email]::placeholder, .simple_form input[type=number]::placeholder, .simple_form input[type=password]::placeholder, .simple_form input[type=text]::placeholder, .simple_form input[type=url]::placeholder, .simple_form textarea::placeholder { color: #a8b9cf } .simple_form input[type=email]:invalid, .simple_form input[type=number]:invalid, .simple_form input[type=password]:invalid, .simple_form input[type=text]:invalid, .simple_form input[type=url]:invalid, .simple_form textarea:invalid { box-shadow: none } .simple_form input[type=email]:required:valid, .simple_form input[type=number]:required:valid, .simple_form input[type=password]:required:valid, .simple_form input[type=text]:required:valid, .simple_form input[type=url]:required:valid, .simple_form textarea:required:valid { border-color: #79bd9a } .simple_form input[type=email]:hover, .simple_form input[type=number]:hover, .simple_form input[type=password]:hover, .simple_form input[type=text]:hover, .simple_form input[type=url]:hover, .simple_form textarea:hover { border-color: #000 } .simple_form input[type=email]:active, .simple_form input[type=email]:focus, .simple_form input[type=number]:active, .simple_form input[type=number]:focus, .simple_form input[type=password]:active, .simple_form input[type=password]:focus, .simple_form input[type=text]:active, .simple_form input[type=text]:focus, .simple_form input[type=url]:active, .simple_form input[type=url]:focus, .simple_form textarea:active, .simple_form textarea:focus { border-color: #2b90d9; background: #17191f } .simple_form input[type=email]:focus:invalid:not(:-moz-placeholder-shown), .simple_form input[type=email]:required:invalid:not(:-moz-placeholder-shown), .simple_form input[type=number]:focus:invalid:not(:-moz-placeholder-shown), .simple_form input[type=number]:required:invalid:not(:-moz-placeholder-shown), .simple_form input[type=password]:focus:invalid:not(:-moz-placeholder-shown), .simple_form input[type=password]:required:invalid:not(:-moz-placeholder-shown), .simple_form input[type=text]:focus:invalid:not(:-moz-placeholder-shown), .simple_form input[type=text]:required:invalid:not(:-moz-placeholder-shown) { border-color: #e87487 } .simple_form input[type=email]:focus:invalid:not(:-ms-input-placeholder), .simple_form input[type=email]:required:invalid:not(:-ms-input-placeholder), .simple_form input[type=number]:focus:invalid:not(:-ms-input-placeholder), .simple_form input[type=number]:required:invalid:not(:-ms-input-placeholder), .simple_form input[type=password]:focus:invalid:not(:-ms-input-placeholder), .simple_form input[type=password]:required:invalid:not(:-ms-input-placeholder), .simple_form input[type=text]:focus:invalid:not(:-ms-input-placeholder), .simple_form input[type=text]:required:invalid:not(:-ms-input-placeholder) { border-color: #e87487 } .simple_form input[type=email]:focus:invalid:not(:placeholder-shown), .simple_form input[type=email]:required:invalid:not(:placeholder-shown), .simple_form input[type=number]:focus:invalid:not(:placeholder-shown), .simple_form input[type=number]:required:invalid:not(:placeholder-shown), .simple_form input[type=password]:focus:invalid:not(:placeholder-shown), .simple_form input[type=password]:required:invalid:not(:placeholder-shown), .simple_form input[type=text]:focus:invalid:not(:placeholder-shown), .simple_form input[type=text]:required:invalid:not(:placeholder-shown) { border-color: #e87487 } .simple_form .input.field_with_errors label { color: #e87487 } .simple_form .input.field_with_errors input[type=email], .simple_form .input.field_with_errors input[type=number], .simple_form .input.field_with_errors input[type=password], .simple_form .input.field_with_errors input[type=text], .simple_form .input.field_with_errors select, .simple_form .input.field_with_errors textarea { border-color: #e87487 } .simple_form .input.field_with_errors .error { display: block; font-weight: 500; color: #e87487; margin-top: 4px } .simple_form .input.disabled { opacity: .5 } .simple_form .actions { margin-top: 30px; display: flex } .simple_form .actions.actions--top { margin-top: 0; margin-bottom: 30px } .simple_form .block-button, .simple_form .button, .simple_form button { display: block; width: 100%; border: 0; border-radius: 4px; background: #2b90d9; color: #fff; font-size: 18px; line-height: inherit; height: auto; padding: 10px; text-transform: uppercase; text-decoration: none; text-align: center; box-sizing: border-box; cursor: pointer; font-weight: 500; outline: 0; margin-bottom: 10px; margin-right: 10px } .simple_form .block-button:last-child, .simple_form .button:last-child, .simple_form button:last-child { margin-right: 0 } .simple_form .block-button:hover, .simple_form .button:hover, .simple_form button:hover { background-color: #419bdd } .simple_form .block-button:active, .simple_form .block-button:focus, .simple_form .button:active, .simple_form .button:focus, .simple_form button:active, .simple_form button:focus { background-color: #2482c7 } .simple_form .block-button:disabled:hover, .simple_form .button:disabled:hover, .simple_form button:disabled:hover { background-color: #9baec8 } .simple_form .block-button.negative, .simple_form .button.negative, .simple_form button.negative { background: #df405a } .simple_form .block-button.negative:hover, .simple_form .button.negative:hover, .simple_form button.negative:hover { background-color: #e3566d } .simple_form .block-button.negative:active, .simple_form .block-button.negative:focus, .simple_form .button.negative:active, .simple_form .button.negative:focus, .simple_form button.negative:active, .simple_form button.negative:focus { background-color: #db2a47 } .simple_form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; font-size: 16px; color: #fff; display: block; width: 100%; outline: 0; font-family: inherit; resize: vertical; background: #131419 url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px; border: 1px solid #0a0b0e; border-radius: 4px; padding-left: 10px; padding-right: 30px; height: 41px } .simple_form h4 { margin-bottom: 15px!important } .simple_form .label_input__wrapper { position: relative } .simple_form .label_input__append { position: absolute; right: 3px; top: 1px; padding: 10px 10px 9px; font-size: 16px; color: #606984; font-family: inherit; pointer-events: none; cursor: default; max-width: 140px; white-space: nowrap; overflow: hidden } .simple_form .label_input__append:after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 1px; width: 5px; background-image: linear-gradient(90deg, rgba(19, 20, 25, 0), #131419) } .simple_form__overlay-area { position: relative } .simple_form__overlay-area__blurred form { -webkit-filter: blur(2px); filter: blur(2px) } .simple_form__overlay-area__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(40, 44, 55, .65); border-radius: 4px; margin-left: -4px; margin-top: -4px; padding: 4px } .simple_form__overlay-area__overlay__content { text-align: center } .simple_form__overlay-area__overlay__content.rich-formatting, .simple_form__overlay-area__overlay__content.rich-formatting p { color: #fff } .block-icon { display: block; margin: 0 auto 10px; font-size: 24px } .flash-message { background: #393f4f; color: #9baec8; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; text-align: center } .flash-message.notice { border: 1px solid rgba(121, 189, 154, .5); background: rgba(121, 189, 154, .25); color: #79bd9a } .flash-message.alert { border: 1px solid rgba(223, 64, 90, .5); background: rgba(223, 64, 90, .1); color: #df405a } .flash-message.hidden { display: none } .flash-message a { display: inline-block; color: #9baec8; text-decoration: none } .flash-message a:hover { color: #fff; text-decoration: underline } .flash-message p { margin-bottom: 15px } .flash-message .oauth-code { outline: 0; box-sizing: border-box; display: block; width: 100%; border: 0; padding: 10px; font-family: "mastodon-font-monospace", monospace; background: #282c37; color: #fff; font-size: 14px; margin: 0 } .flash-message .oauth-code::-moz-focus-inner { border: 0 } .flash-message .oauth-code::-moz-focus-inner, .flash-message .oauth-code:active, .flash-message .oauth-code:focus { outline: 0!important } .flash-message .oauth-code:focus { background: #313543 } .flash-message strong { font-weight: 500 } .flash-message strong:lang(ja), .flash-message strong:lang(ko), .flash-message strong:lang(zh-CN), .flash-message strong:lang(zh-HK), .flash-message strong:lang(zh-TW) { font-weight: 700 } @media screen and (max-width:740px)and (min-width:441px) { .flash-message { margin-top: 40px } } .flash-message.translation-prompt { text-align: unset; color: unset } .flash-message.translation-prompt a { text-decoration: underline } .form-footer { margin-top: 30px; text-align: center } .form-footer a { color: #9baec8; text-decoration: none } .form-footer a:hover { text-decoration: underline } .quick-nav { list-style: none; margin-bottom: 25px; font-size: 14px } .quick-nav li { display: inline-block; margin-right: 10px } .quick-nav a { color: #2b90d9; text-transform: uppercase; text-decoration: none; font-weight: 700 } .quick-nav a:active, .quick-nav a:focus, .quick-nav a:hover { color: #4ea2df } .follow-prompt, .oauth-prompt { margin-bottom: 30px; color: #9baec8 } .follow-prompt h2, .oauth-prompt h2 { font-size: 16px; margin-bottom: 30px; text-align: center } .follow-prompt strong, .oauth-prompt strong { color: #d9e1e8; font-weight: 500 } .follow-prompt strong:lang(ja), .follow-prompt strong:lang(ko), .follow-prompt strong:lang(zh-CN), .follow-prompt strong:lang(zh-HK), .follow-prompt strong:lang(zh-TW), .oauth-prompt strong:lang(ja), .oauth-prompt strong:lang(ko), .oauth-prompt strong:lang(zh-CN), .oauth-prompt strong:lang(zh-HK), .oauth-prompt strong:lang(zh-TW) { font-weight: 700 } @media screen and (max-width:740px)and (min-width:441px) { .follow-prompt, .oauth-prompt { margin-top: 40px } } .qr-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start } .qr-code { flex: 0 0 auto; background: #fff; padding: 4px; margin: 0 10px 20px 0; box-shadow: 0 0 15px rgba(0, 0, 0, .2); display: inline-block } .qr-code svg { display: block; margin: 0 } .qr-alternative { margin-bottom: 20px; color: #d9e1e8; flex: 150px } .qr-alternative samp { display: block; font-size: 14px } .table-form p { margin-bottom: 15px } .table-form p strong { font-weight: 500 } .table-form p strong:lang(ja), .table-form p strong:lang(ko), .table-form p strong:lang(zh-CN), .table-form p strong:lang(zh-HK), .table-form p strong:lang(zh-TW) { font-weight: 700 } .simple_form .warning, .table-form .warning { box-sizing: border-box; background: rgba(223, 64, 90, .5); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .3); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); border-radius: 4px; padding: 10px; margin-bottom: 15px } .simple_form .warning a, .table-form .warning a { color: #fff; text-decoration: underline } .simple_form .warning a:active, .simple_form .warning a:focus, .simple_form .warning a:hover, .table-form .warning a:active, .table-form .warning a:focus, .table-form .warning a:hover { text-decoration: none } .simple_form .warning strong, .table-form .warning strong { font-weight: 600; display: block; margin-bottom: 5px } .simple_form .warning strong:lang(ja), .simple_form .warning strong:lang(ko), .simple_form .warning strong:lang(zh-CN), .simple_form .warning strong:lang(zh-HK), .simple_form .warning strong:lang(zh-TW), .table-form .warning strong:lang(ja), .table-form .warning strong:lang(ko), .table-form .warning strong:lang(zh-CN), .table-form .warning strong:lang(zh-HK), .table-form .warning strong:lang(zh-TW) { font-weight: 700 } .simple_form .warning strong .fa, .table-form .warning strong .fa { font-weight: 400 } .action-pagination { display: flex; flex-wrap: wrap; align-items: center } .action-pagination .actions, .action-pagination .pagination { flex: 1 1 auto } .action-pagination .actions { padding: 30px 20px 30px 0; flex: 0 0 auto } .post-follow-actions { text-align: center; color: #9baec8 } .post-follow-actions div { margin-bottom: 4px } .alternative-login { margin-top: 20px; margin-bottom: 20px } .alternative-login h4 { font-size: 16px; color: #fff; text-align: center; margin-bottom: 20px; border: 0; padding: 0 } .alternative-login .button { display: block } .scope-danger { color: #ff5050 } .form_admin_settings_closed_registrations_message textarea, .form_admin_settings_custom_css textarea, .form_admin_settings_site_description textarea, .form_admin_settings_site_extended_description textarea, .form_admin_settings_site_short_description textarea, .form_admin_settings_site_terms textarea { font-family: "mastodon-font-monospace", monospace } .input-copy { background: #131419; border: 1px solid #0a0b0e; border-radius: 4px; display: flex; align-items: center; padding-right: 4px; position: relative; top: 1px; transition: border-color .3s linear } .input-copy__wrapper { flex: 1 1 auto } .input-copy input[type=text] { background: transparent; border: 0; padding: 10px; font-size: 14px; font-family: "mastodon-font-monospace", monospace } .input-copy button { flex: 0 0 auto; margin: 4px; text-transform: none; font-weight: 400; font-size: 14px; padding: 7px 18px 6px; width: auto; transition: background .3s linear } .input-copy.copied { border-color: #79bd9a; transition: none } .input-copy.copied button { background: #79bd9a; transition: none } .connection-prompt { margin-bottom: 25px } .connection-prompt .fa-link { background-color: #1f232b; border-radius: 100%; font-size: 24px; padding: 10px } .connection-prompt__column { align-items: center; display: flex; flex: 1; flex-direction: column; flex-shrink: 1; max-width: 50% } .connection-prompt__column-sep { align-self: center; flex-grow: 0; overflow: visible; position: relative; z-index: 1 } .connection-prompt__column p { word-break: break-word } .connection-prompt .account__avatar { margin-bottom: 20px } .connection-prompt__connection { background-color: #393f4f; box-shadow: 0 0 15px rgba(0, 0, 0, .2); border-radius: 4px; padding: 25px 10px; position: relative; text-align: center } .connection-prompt__connection:after { background-color: #1f232b; content: ""; display: block; height: 100%; left: 50%; position: absolute; top: 0; width: 1px } .connection-prompt__row { align-items: flex-start; display: flex; flex-direction: row } .input.user_confirm_password:not(.field_with_errors), .input.user_website:not(.field_with_errors) { display: none } .card>a { display: block; text-decoration: none; color: inherit; box-shadow: 0 0 15px rgba(0, 0, 0, .2) } @media screen and (max-width:415px) { .card>a { box-shadow: none } } .card>a:active .card__bar, .card>a:focus .card__bar, .card>a:hover .card__bar { background: #393f4f } .card__img { height: 130px; position: relative; background: #0e1014; border-radius: 4px 4px 0 0 } .card__img img { display: block; width: 100%; height: 100%; margin: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; border-radius: 4px 4px 0 0 } @media screen and (max-width:600px) { .card__img { height: 200px } } @media screen and (max-width:415px) { .card__img { display: none } } .card__bar { position: relative; padding: 15px; display: flex; justify-content: flex-start; align-items: center; background: #313543; border-radius: 0 0 4px 4px } @media screen and (max-width:415px) { .card__bar { border-radius: 0 } } .card__bar .avatar { flex: 0 0 auto; width: 48px; height: 48px; padding-top: 2px } .card__bar .avatar img { width: 100%; height: 100%; display: block; margin: 0; border-radius: 4px; background: #17191f; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover } .card__bar .display-name { margin-left: 15px; text-align: left } .card__bar .display-name i[data-hidden] { display: none } .card__bar .display-name strong { font-size: 15px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis } .card__bar .display-name span { display: block; font-size: 14px; color: #9baec8; font-weight: 400; overflow: hidden; text-overflow: ellipsis } .pagination { padding: 30px 0; text-align: center; overflow: hidden } .pagination .current, .pagination .gap, .pagination .newer, .pagination .older, .pagination .page, .pagination a { font-size: 14px; color: #fff; font-weight: 500; display: inline-block; padding: 6px 10px; text-decoration: none } .pagination .current { background: #fff; border-radius: 100px; color: #282c37; cursor: default; margin: 0 10px } .pagination .gap { cursor: default } .pagination .newer, .pagination .older { text-transform: uppercase; color: #d9e1e8 } .pagination .older { float: left; padding-left: 0 } .pagination .older .fa { display: inline-block; margin-right: 5px } .pagination .newer { float: right; padding-right: 0 } .pagination .newer .fa { display: inline-block; margin-left: 5px } .pagination .disabled { cursor: default; color: #3d4455 } @media screen and (max-width:700px) { .pagination { padding: 30px 20px } .pagination .page { display: none } .pagination .newer, .pagination .older { display: inline-block } } .nothing-here { background: #282c37; box-shadow: 0 0 15px rgba(0, 0, 0, .2); color: #9baec8; font-size: 14px; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; cursor: default; border-radius: 4px; padding: 20px; min-height: 30vh } .nothing-here--under-tabs { border-radius: 0 0 4px 4px } .nothing-here--flexible { box-sizing: border-box; min-height: 100% } .account-role, .simple_form .recommended { display: inline-block; padding: 4px 6px; cursor: default; border-radius: 3px; font-size: 12px; line-height: 12px; font-weight: 500; color: #d9e1e8; background-color: rgba(217, 225, 232, .1); border: 1px solid rgba(217, 225, 232, .5) } .account-role.moderator, .simple_form .recommended.moderator { color: #79bd9a; background-color: rgba(121, 189, 154, .1); border-color: rgba(121, 189, 154, .5) } .account-role.admin, .simple_form .recommended.admin { color: #e87487; background-color: rgba(232, 116, 135, .1); border-color: rgba(232, 116, 135, .5) } .account__header__fields { max-width: 100vw; padding: 0; margin: 15px -15px -15px; border-bottom: 0; border-top: 0; border-color: #42485a currentcolor; border-style: solid none; border-width: 1px 0; font-size: 14px; line-height: 20px } .account__header__fields dl { display: flex; border-bottom: 1px solid #42485a } .account__header__fields dd, .account__header__fields dt { box-sizing: border-box; padding: 14px; text-align: center; max-height: 48px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .account__header__fields dt { font-weight: 500; width: 120px; flex: 0 0 auto; color: #d9e1e8; background: rgba(23, 25, 31, .5) } .account__header__fields dd { flex: 1 1 auto; color: #9baec8 } .account__header__fields a { color: #2b90d9; text-decoration: none } .account__header__fields a:active, .account__header__fields a:focus, .account__header__fields a:hover { text-decoration: underline } .account__header__fields .verified { border: 1px solid rgba(121, 189, 154, .5); background: rgba(121, 189, 154, .25) } .account__header__fields .verified a { color: #79bd9a; font-weight: 500 } .account__header__fields .verified__mark { color: #79bd9a } .account__header__fields dl:last-child { border-bottom: 0 } .directory__tag .trends__item__current { width: auto } .pending-account__header { color: #9baec8 } .pending-account__header a { color: #d9e1e8; text-decoration: none } .pending-account__header a:active, .pending-account__header a:focus, .pending-account__header a:hover { text-decoration: underline } .pending-account__header strong { color: #fff; font-weight: 700 } .pending-account__body { margin-top: 10px } .activity-stream { box-shadow: 0 0 15px rgba(0, 0, 0, .2); border-radius: 4px; overflow: hidden; margin-bottom: 10px } .activity-stream--under-tabs { border-radius: 0 0 4px 4px } @media screen and (max-width:415px) { .activity-stream { margin-bottom: 0; border-radius: 0; box-shadow: none } } .activity-stream--headless { border-radius: 0; margin: 0; box-shadow: none } .activity-stream--headless .detailed-status, .activity-stream--headless .status { border-radius: 0!important } .activity-stream div[data-component] { width: 100% } .activity-stream .entry { background: #282c37 } .activity-stream .entry .detailed-status, .activity-stream .entry .load-more, .activity-stream .entry .status { -webkit-animation: none; animation: none } .activity-stream .entry:last-child .detailed-status, .activity-stream .entry:last-child .load-more, .activity-stream .entry:last-child .status { border-bottom: 0; border-radius: 0 0 4px 4px } .activity-stream .entry:first-child .detailed-status, .activity-stream .entry:first-child .load-more, .activity-stream .entry:first-child .status { border-radius: 4px 4px 0 0 } .activity-stream .entry:first-child:last-child .detailed-status, .activity-stream .entry:first-child:last-child .load-more, .activity-stream .entry:first-child:last-child .status { border-radius: 4px } @media screen and (max-width:740px) { .activity-stream .entry .detailed-status, .activity-stream .entry .load-more, .activity-stream .entry .status { border-radius: 0!important } } .activity-stream--highlighted .entry { background: #393f4f } .button.logo-button { flex: 0 auto; font-size: 14px; background: #2b90d9; color: #fff; text-transform: none; line-height: 16px; height: auto; min-height: 36px; min-width: 88px; white-space: normal; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; padding: 0 15px; border: 0 } .button.logo-button svg { width: 20px; height: auto; vertical-align: middle; margin-right: 5px; fill: #fff } .button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover { background: #56a7e1 } .button.logo-button.disabled:active, .button.logo-button.disabled:focus, .button.logo-button.disabled:hover, .button.logo-button:disabled:active, .button.logo-button:disabled:focus, .button.logo-button:disabled:hover { background: #9baec8 } .button.logo-button.button--destructive:active, .button.logo-button.button--destructive:focus, .button.logo-button.button--destructive:hover { background: #df405a } @media screen and (max-width:415px) { .button.logo-button svg { display: none } } .embed .status__content[data-spoiler=folded] .e-content, .public-layout .status__content[data-spoiler=folded] .e-content { display: none } .embed .status__content[data-spoiler=folded] p:first-child, .public-layout .status__content[data-spoiler=folded] p:first-child { margin-bottom: 0 } .embed .detailed-status, .public-layout .detailed-status { padding: 15px } .embed .detailed-status .detailed-status__display-avatar .account__avatar, .public-layout .detailed-status .detailed-status__display-avatar .account__avatar { width: 48px; height: 48px } .embed .status, .public-layout .status { padding: 15px 15px 15px 78px; min-height: 50px } .embed .status__avatar, .public-layout .status__avatar { left: 15px; top: 17px } .embed .status__avatar .account__avatar, .public-layout .status__avatar .account__avatar { width: 48px; height: 48px } .embed .status__content, .public-layout .status__content { padding-top: 5px } .embed .status__prepend, .public-layout .status__prepend { margin-left: 78px; padding-top: 15px } .embed .status__prepend-icon-wrapper, .public-layout .status__prepend-icon-wrapper { left: -32px } .embed .status .media-gallery, .embed .status .video-player, .embed .status__action-bar, .public-layout .status .media-gallery, .public-layout .status .video-player, .public-layout .status__action-bar { margin-top: 10px } .embed .status__action-bar-button, .public-layout .status__action-bar-button { font-size: 18px; width: 23.1429px; height: 23.1429px; line-height: 23.15px } button.icon-button i.fa-retweet { background-image: url("data:image/svg+xml;utf8,") } button.icon-button:hover i.fa-retweet { background-image: url("data:image/svg+xml;utf8,") } button.icon-button.reblogPrivate i.fa-retweet { background-image: url("data:image/svg+xml;utf8,") } button.icon-button.reblogPrivate:hover i.fa-retweet { background-image: url("data:image/svg+xml;utf8,") } button.icon-button.disabled:hover i.fa-retweet, button.icon-button.disabled i.fa-retweet { background-image: url("data:image/svg+xml;utf8,") } .media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet { background-image: url("data:image/svg+xml;utf8,") } .app-body { -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar } .animated-number { display: inline-flex; flex-direction: column; align-items: stretch; overflow: hidden; position: relative } .inline-alert { color: #79bd9a; font-weight: 400 } .no-reduce-motion .inline-alert { transition: opacity .2s ease } .link-button { display: block; font-size: 15px; line-height: 20px; color: #2b90d9; border: 0; background: transparent; padding: 0; cursor: pointer } .link-button:active, .link-button:hover { text-decoration: underline } .link-button:disabled { color: #9baec8; cursor: default } .button { background-color: #2b90d9; border: 10px; border-radius: 4px; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-weight: 500; height: 36px; letter-spacing: 0; line-height: 36px; overflow: hidden; padding: 0 16px; position: relative; text-align: center; text-transform: uppercase; text-decoration: none; text-overflow: ellipsis; transition: all .1s ease-in; white-space: nowrap; width: auto } .button:active, .button:focus, .button:hover { background-color: #56a7e1; transition: all .2s ease-out } .button--destructive { transition: none } .button--destructive:active, .button--destructive:focus, .button--destructive:hover { background-color: #df405a; transition: none } .button.disabled, .button:disabled { background-color: #9baec8; cursor: default } .button::-moz-focus-inner { border: 0 } .button::-moz-focus-inner, .button:active, .button:focus { outline: 0!important } .button.button-alternative, .button.button-alternative-2, .button.button-primary, .button.button-secondary { font-size: 16px; line-height: 36px; height: auto; text-transform: none; padding: 4px 16px } .button.button-alternative { color: #282c37; background: #9baec8 } .button.button-alternative:active, .button.button-alternative:focus, .button.button-alternative:hover { background-color: #a8b9cf } .button.button-alternative-2 { background: #606984 } .button.button-alternative-2:active, .button.button-alternative-2:focus, .button.button-alternative-2:hover { background-color: #687390 } .button.button-secondary { color: #9baec8; background: transparent; padding: 3px 15px; border: 1px solid #9baec8 } .button.button-secondary:active, .button.button-secondary:focus, .button.button-secondary:hover { border-color: #a8b9cf; color: #a8b9cf } .button.button-secondary:disabled { opacity: .5 } .button.button--block { display: block; width: 100% } .layout-multiple-columns .button.button--with-bell { font-size: 12px; padding: 0 8px } .column__wrapper { display: flex; flex: 1 1 auto; position: relative } .icon-button { display: inline-block; padding: 0; color: #606984; border: 0; border-radius: 4px; background: transparent; cursor: pointer; transition: all .1s ease-in; transition-property: background-color, color; text-decoration: none } .icon-button:active, .icon-button:focus, .icon-button:hover { color: #707b97; background-color: rgba(96, 105, 132, .15); transition: all .2s ease-out; transition-property: background-color, color } .icon-button:focus { background-color: rgba(96, 105, 132, .3) } .icon-button.disabled { color: #444b5d; background-color: transparent; cursor: default } .icon-button.active { color: #2b90d9 } .icon-button::-moz-focus-inner { border: 0 } .icon-button::-moz-focus-inner, .icon-button:active, .icon-button:focus { outline: 0!important } .icon-button.inverted { color: #606984 } .icon-button.inverted:active, .icon-button.inverted:focus, .icon-button.inverted:hover { color: #51596f; background-color: rgba(96, 105, 132, .15) } .icon-button.inverted:focus { background-color: rgba(96, 105, 132, .3) } .icon-button.inverted.disabled { color: #707b97; background-color: transparent } .icon-button.inverted.active { color: #2b90d9 } .icon-button.inverted.active.disabled { color: #63ade3 } .icon-button.overlayed { box-sizing: content-box; background: rgba(0, 0, 0, .6); color: hsla(0, 0%, 100%, .7); border-radius: 4px; padding: 2px } .icon-button.overlayed:hover { background: rgba(0, 0, 0, .9) } .icon-button--with-counter { display: inline-flex; align-items: center; width: auto!important } .icon-button__counter { display: inline-block; width: 14px; margin-left: 4px; font-size: 12px; font-weight: 500 } .text-icon-button { color: #606984; border: 0; border-radius: 4px; background: transparent; cursor: pointer; font-weight: 600; font-size: 11px; padding: 0 3px; line-height: 27px; outline: 0; transition: all .1s ease-in; transition-property: background-color, color } .text-icon-button:active, .text-icon-button:focus, .text-icon-button:hover { color: #51596f; background-color: rgba(96, 105, 132, .15); transition: all .2s ease-out; transition-property: background-color, color } .text-icon-button:focus { background-color: rgba(96, 105, 132, .3) } .text-icon-button.disabled { color: #979eb3; background-color: transparent; cursor: default } .text-icon-button.active { color: #2b90d9 } .text-icon-button::-moz-focus-inner { border: 0 } .text-icon-button::-moz-focus-inner, .text-icon-button:active, .text-icon-button:focus { outline: 0!important } .dropdown-menu, .invisible { position: absolute } .invisible { font-size: 0; line-height: 0; display: inline-block; width: 0; height: 0 } .invisible img, .invisible svg { margin: 0!important; border: 0!important; padding: 0!important; width: 0!important; height: 0!important } .ellipsis:after { content: "…" } .compose-form { padding: 10px } .compose-form__sensitive-button { padding: 0 10px 10px; font-size: 14px; font-weight: 500 } .compose-form__sensitive-button.active { color: #2b90d9 } .compose-form__sensitive-button input[type=checkbox] { display: none } .compose-form__sensitive-button .checkbox { display: inline-block; position: relative; border: 1px solid #9baec8; box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 auto; margin-right: 10px; top: -1px; border-radius: 4px; vertical-align: middle } .compose-form__sensitive-button .checkbox.active { border-color: #2b90d9; background: #2b90d9 } .compose-form .compose-form__warning { color: #282c37; margin-bottom: 10px; background: #9baec8; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); padding: 8px 10px; border-radius: 4px; font-size: 13px; font-weight: 400 } .compose-form .compose-form__warning strong { color: #282c37; font-weight: 500 } .compose-form .compose-form__warning strong:lang(ja), .compose-form .compose-form__warning strong:lang(ko), .compose-form .compose-form__warning strong:lang(zh-CN), .compose-form .compose-form__warning strong:lang(zh-HK), .compose-form .compose-form__warning strong:lang(zh-TW) { font-weight: 700 } .compose-form .compose-form__warning a { color: #606984; font-weight: 500; text-decoration: underline } .compose-form .compose-form__warning a:active, .compose-form .compose-form__warning a:focus, .compose-form .compose-form__warning a:hover { text-decoration: none } .compose-form .emoji-picker-dropdown { position: absolute; top: 0; right: 0 } .compose-form .compose-form__autosuggest-wrapper { position: relative } .compose-form .autosuggest-input, .compose-form .autosuggest-textarea, .compose-form .spoiler-input { position: relative; width: 100% } .compose-form .spoiler-input { height: 0; transform-origin: bottom; opacity: 0 } .compose-form .spoiler-input.spoiler-input--visible { height: 36px; margin-bottom: 11px; opacity: 1 } .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input { display: block; box-sizing: border-box; width: 100%; margin: 0; color: #282c37; background: #fff; padding: 10px; font-family: inherit; font-size: 14px; resize: vertical; border: 0; outline: 0 } .compose-form .autosuggest-textarea__textarea::-webkit-input-placeholder, .compose-form .spoiler-input__input::-webkit-input-placeholder { color: #606984 } .compose-form .autosuggest-textarea__textarea::-moz-placeholder, .compose-form .spoiler-input__input::-moz-placeholder { color: #606984 } .compose-form .autosuggest-textarea__textarea:-ms-input-placeholder, .compose-form .spoiler-input__input:-ms-input-placeholder { color: #606984 } .compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .spoiler-input__input::placeholder { color: #606984 } .compose-form .autosuggest-textarea__textarea:focus, .compose-form .spoiler-input__input:focus { outline: 0 } @media screen and (max-width:600px) { .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input { font-size: 16px } } .compose-form .spoiler-input__input { border-radius: 4px } .compose-form .autosuggest-textarea__textarea { min-height: 100px; border-radius: 4px 4px 0 0; padding-bottom: 0; padding-right: 32px; resize: none; scrollbar-color: auto } .compose-form .autosuggest-textarea__textarea::-webkit-scrollbar { all: unset } @media screen and (max-width:600px) { .compose-form .autosuggest-textarea__textarea { height: 100px!important; resize: vertical } } .compose-form .autosuggest-textarea__suggestions-wrapper { position: relative; height: 0 } .compose-form .autosuggest-textarea__suggestions { box-sizing: border-box; display: none; position: absolute; top: 100%; width: 100%; z-index: 99; box-shadow: 4px 4px 6px rgba(0, 0, 0, .4); background: #d9e1e8; border-radius: 0 0 4px 4px; color: #282c37; font-size: 14px; padding: 6px } .compose-form .autosuggest-textarea__suggestions.autosuggest-textarea__suggestions--visible { display: block } .compose-form .autosuggest-textarea__suggestions__item { padding: 10px; cursor: pointer; border-radius: 4px } .compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:active, .compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:hover { background: #b9c8d5 } .compose-form .autosuggest-account, .compose-form .autosuggest-emoji, .compose-form .autosuggest-hashtag { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; line-height: 18px; font-size: 14px } .compose-form .autosuggest-hashtag { justify-content: space-between } .compose-form .autosuggest-hashtag__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .compose-form .autosuggest-hashtag strong { font-weight: 500 } .compose-form .autosuggest-hashtag__uses { flex: 0 0 auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .compose-form .autosuggest-account-icon, .compose-form .autosuggest-emoji img { display: block; margin-right: 8px; width: 16px; height: 16px } .compose-form .autosuggest-account .display-name__account { color: #606984 } .compose-form .compose-form__modifiers { color: #282c37; font-family: inherit; font-size: 14px; background: #fff } .compose-form .compose-form__modifiers .compose-form__upload-wrapper { overflow: hidden } .compose-form .compose-form__modifiers .compose-form__uploads-wrapper { display: flex; flex-direction: row; padding: 5px; flex-wrap: wrap } .compose-form .compose-form__modifiers .compose-form__upload { flex: 1 1 0; min-width: 40%; margin: 5px } .compose-form .compose-form__modifiers .compose-form__upload__actions { background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 80%, transparent); display: flex; align-items: flex-start; justify-content: space-between; opacity: 0; transition: opacity .1s ease } .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button { flex: 0 1 auto; color: #d9e1e8; font-size: 14px; font-weight: 500; padding: 10px; font-family: inherit } .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:active, .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:focus, .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:hover { color: #eff3f5 } .compose-form .compose-form__modifiers .compose-form__upload__actions.active { opacity: 1 } .compose-form .compose-form__modifiers .compose-form__upload-description { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; box-sizing: border-box; background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 80%, transparent); padding: 10px; opacity: 0; transition: opacity .1s ease } .compose-form .compose-form__modifiers .compose-form__upload-description textarea { background: transparent; color: #d9e1e8; border: 0; padding: 0; margin: 0; width: 100%; font-family: inherit; font-size: 14px; font-weight: 500 } .compose-form .compose-form__modifiers .compose-form__upload-description textarea:focus { color: #fff } .compose-form .compose-form__modifiers .compose-form__upload-description textarea::-webkit-input-placeholder { opacity: .75; color: #d9e1e8 } .compose-form .compose-form__modifiers .compose-form__upload-description textarea::-moz-placeholder { opacity: .75; color: #d9e1e8 } .compose-form .compose-form__modifiers .compose-form__upload-description textarea:-ms-input-placeholder { opacity: .75; color: #d9e1e8 } .compose-form .compose-form__modifiers .compose-form__upload-description textarea::placeholder { opacity: .75; color: #d9e1e8 } .compose-form .compose-form__modifiers .compose-form__upload-description.active { opacity: 1 } .compose-form .compose-form__modifiers .compose-form__upload-thumbnail { border-radius: 4px; background-color: #000; background-position: 50%; background-size: cover; background-repeat: no-repeat; height: 140px; width: 100%; overflow: hidden } .compose-form .compose-form__buttons-wrapper { padding: 10px; background: #ebebeb; border-radius: 0 0 4px 4px; display: flex; justify-content: space-between; flex: 0 0 auto } .compose-form .compose-form__buttons-wrapper .compose-form__buttons { display: flex } .compose-form .compose-form__buttons-wrapper .compose-form__buttons .compose-form__upload-button-icon { line-height: 27px } .compose-form .compose-form__buttons-wrapper .compose-form__buttons .compose-form__sensitive-button { display: none } .compose-form .compose-form__buttons-wrapper .compose-form__buttons .compose-form__sensitive-button.compose-form__sensitive-button--visible { display: block } .compose-form .compose-form__buttons-wrapper .compose-form__buttons .compose-form__sensitive-button .compose-form__sensitive-button__icon { line-height: 27px } .compose-form .compose-form__buttons-wrapper .icon-button, .compose-form .compose-form__buttons-wrapper .text-icon-button { box-sizing: content-box; padding: 0 3px } .compose-form .compose-form__buttons-wrapper .character-counter__wrapper { align-self: center; margin-right: 4px } .compose-form .compose-form__publish { display: flex; justify-content: flex-end; min-width: 0; flex: 0 0 auto } .compose-form .compose-form__publish .compose-form__publish-button-wrapper { overflow: hidden; padding-top: 10px } .character-counter { cursor: default; font-family: "mastodon-font-sans-serif", sans-serif; font-size: 14px; font-weight: 600; color: #606984 } .character-counter.character-counter--over { color: #ff5050 } .no-reduce-motion .spoiler-input { transition: height .4s ease, opacity .4s ease } .emojione { font-family: "object-fit:contain", inherit; vertical-align: middle; -o-object-fit: contain; object-fit: contain; margin: -.2ex .15em .2ex; width: 16px; height: 16px } .emojione img { width: auto } .reply-indicator { border-radius: 4px; margin-bottom: 10px; background: #9baec8; padding: 10px; min-height: 23px; overflow-y: auto; flex: 0 2 auto } .reply-indicator__header { margin-bottom: 5px; overflow: hidden } .reply-indicator__cancel { float: right; line-height: 24px } .reply-indicator__display-name { color: #282c37; display: block; max-width: 100%; line-height: 24px; overflow: hidden; padding-right: 25px; text-decoration: none } .reply-indicator__display-avatar { float: left; margin-right: 5px } .status__content--with-action { cursor: pointer } .status__content { clear: both } .reply-indicator__content, .status__content { position: relative; font-size: 15px; line-height: 20px; word-wrap: break-word; font-weight: 400; overflow: hidden; text-overflow: ellipsis; padding-top: 2px; color: #000000 /* oloturia testo */ } .reply-indicator__content:focus, .status__content:focus { outline: 0 } .reply-indicator__content.status__content--with-spoiler, .status__content.status__content--with-spoiler { white-space: normal } .reply-indicator__content.status__content--with-spoiler .status__content__text, .status__content.status__content--with-spoiler .status__content__text { white-space: pre-wrap } .reply-indicator__content .emojione, .status__content .emojione { width: 20px; height: 20px; margin: -3px 0 0 } .reply-indicator__content p, .status__content p { margin-bottom: 5px; /* oloturia 20px */ white-space: pre-wrap; unicode-bidi: -moz-plaintext; unicode-bidi: plaintext } .reply-indicator__content p:last-child, .status__content p:last-child { margin-bottom: 0 } .reply-indicator__content a, .status__content a { color: #505050; /* oloturia vgo */ text-decoration: none; unicode-bidi: -webkit-isolate; unicode-bidi: -moz-isolate; unicode-bidi: isolate } .reply-indicator__content a:hover, .status__content a:hover { text-decoration: underline } .reply-indicator__content a:hover .fa, .status__content a:hover .fa { color: #707b97 } .reply-indicator__content a.mention:hover, .status__content a.mention:hover { text-decoration: none } .reply-indicator__content a.mention:hover span, .status__content a.mention:hover span { text-decoration: underline } .reply-indicator__content a .fa, .status__content a .fa { color: #606984 } .reply-indicator__content a.unhandled-link, .status__content a.unhandled-link { color: #4ea2df } .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { background: #606984 } .reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover { background: #707b97; text-decoration: none } .reply-indicator__content .status__content__spoiler-link::-moz-focus-inner, .status__content .status__content__spoiler-link::-moz-focus-inner { border: 0 } .reply-indicator__content .status__content__spoiler-link::-moz-focus-inner, .reply-indicator__content .status__content__spoiler-link:active, .reply-indicator__content .status__content__spoiler-link:focus, .status__content .status__content__spoiler-link::-moz-focus-inner, .status__content .status__content__spoiler-link:active, .status__content .status__content__spoiler-link:focus { outline: 0!important } .reply-indicator__content .status__content__text, .status__content .status__content__text { display: none } .reply-indicator__content .status__content__text.status__content__text--visible, .status__content .status__content__text.status__content__text--visible { display: block } .announcements__item__content { word-wrap: break-word; overflow-y: auto } .announcements__item__content .emojione { width: 20px; height: 20px; margin: -3px 0 0 } .announcements__item__content p { margin-bottom: 10px; white-space: pre-wrap } .announcements__item__content p:last-child { margin-bottom: 0 } .announcements__item__content a { color: #d9e1e8; text-decoration: none } .announcements__item__content a:hover { text-decoration: underline } .announcements__item__content a.mention:hover { text-decoration: none } .announcements__item__content a.mention:hover span { text-decoration: underline } .announcements__item__content a.unhandled-link { color: #4ea2df } .status__content.status__content--collapsed { max-height: 300px } .status__content__read-more-button { display: block; font-size: 15px; line-height: 20px; color: #4ea2df; border: 0; background: transparent; padding: 8px 0 0; text-decoration: none } .status__content__read-more-button:active, .status__content__read-more-button:hover { text-decoration: underline } .status__content__spoiler-link { display: inline-block; border-radius: 2px; background: transparent; border: 0; color: #282c37; font-weight: 700; font-size: 11px; padding: 0 6px; text-transform: uppercase; line-height: 20px; cursor: pointer; vertical-align: middle } .status__wrapper--filtered { color: #606984; border: 0; font-size: inherit; text-align: center; line-height: inherit; margin: 0; padding: 15px; box-sizing: border-box; width: 100%; clear: both; border-bottom: 1px solid #393f4f } .status__prepend-icon-wrapper { left: -26px; position: absolute } .focusable:focus { outline: 0; background: #313543 } .focusable:focus .detailed-status, .focusable:focus .detailed-status__action-bar { background: #393f4f } .status { padding: 8px 10px 8px 68px; position: relative; min-height: 54px; border-bottom: 1px solid #393f4f; cursor: auto; opacity: 1; -webkit-animation: fade .15s linear; animation: fade .15s linear } @supports(-ms-overflow-style:-ms-autohiding-scrollbar) { .status { padding-right: 26px } } @-webkit-keyframes fade { 0% { opacity: 0 } to { opacity: 1 } } @keyframes fade { 0% { opacity: 0 } to { opacity: 1 } } .status .audio-player, .status .video-player { margin-top: 8px } .status.light .status__relative-time, .status.light .status__visibility-icon { color: #9baec8 } .status.light .status__display-name { color: #282c37 } .status.light .display-name { color: #9baec8 } .status.light .display-name strong, .status.light .status__content { color: #282c37 } .status.light .status__content a { color: #2b90d9 } .status.light .status__content a.status__content__spoiler-link { color: #fff; background: #9baec8 } .status.light .status__content a.status__content__spoiler-link:hover { background: #b5c3d6 } .notification__relative_time, .status__relative-time { color: #606984; float: right; font-size: 14px; padding-bottom: 1px } .status__visibility-icon { padding: 0 4px } .status__display-name { color: #606984 } .status__info .status__display-name { display: block; max-width: 100%; padding-right: 25px } .status__info { font-size: 15px } .status-check-box { border-bottom: 1px solid #d9e1e8; display: flex } .status-check-box .status-check-box__status { margin: 10px 0 10px 10px; flex: 1; overflow: hidden } .status-check-box .status-check-box__status .media-gallery { max-width: 250px } .status-check-box .status-check-box__status .status__content { padding: 0; white-space: normal } .status-check-box .status-check-box__status .audio-player, .status-check-box .status-check-box__status .video-player { margin-top: 8px; max-width: 250px } .status-check-box .status-check-box__status .media-gallery__item-thumbnail { cursor: default } .status-check-box-toggle { align-items: center; display: flex; flex: 0 0 auto; justify-content: center; padding: 10px } .status__prepend { margin-left: 68px; color: #606984; padding: 8px 0 2px; font-size: 14px; position: relative } .status__prepend .status__display-name strong { color: #606984 } .status__prepend>span { display: block; overflow: hidden; text-overflow: ellipsis } .status__action-bar { align-items: center; display: flex; margin-top: 8px } .status__action-bar-button { margin-right: 18px } .status__action-bar-button.icon-button--with-counter { margin-right: 14px } .status__action-bar-dropdown { height: 23.15px; width: 23.15px } .detailed-status__action-bar-dropdown { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; position: relative } .detailed-status { background: #ffffff; /* oloturia sfondo */ padding: 14px 10px } .detailed-status--flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start } .detailed-status--flex .detailed-status__meta, .detailed-status--flex .status__content { flex: 100% } .detailed-status .status__content { font-size: 19px; line-height: 24px } .detailed-status .status__content .emojione { width: 24px; height: 24px; margin: -1px 0 0 } .detailed-status .status__content .status__content__spoiler-link { line-height: 24px; margin: -1px 0 0 } .detailed-status .audio-player, .detailed-status .video-player { margin-top: 8px } .detailed-status__meta { margin-top: 15px; color: #505050; /* oloturia status */ font-size: 14px; line-height: 18px } .detailed-status__action-bar { background: #313543; border-top: 1px solid #393f4f; border-bottom: 1px solid #393f4f; display: flex; flex-direction: row; padding: 10px 0 } .detailed-status__link { color: inherit; text-decoration: none } .detailed-status__favorites, .detailed-status__reblogs { display: inline-block; font-weight: 500; font-size: 12px; margin-left: 6px } .reply-indicator__content { color: #282c37; font-size: 14px } .reply-indicator__content a { color: #606984 } .domain { padding: 10px; border-bottom: 1px solid #393f4f } .domain .domain__domain-name { flex: 1 1 auto; display: block; color: #fff; text-decoration: none; font-size: 14px; font-weight: 500 } .domain__wrapper { display: flex } .domain_buttons { height: 18px; padding: 10px; white-space: nowrap } .account { padding: 10px; border-bottom: 1px solid #393f4f } .account.compact { padding: 0; border-bottom: 0 } .account.compact .account__avatar-wrapper { margin-left: 0 } .account .account__display-name { flex: 1 1 auto; display: block; color: #9baec8; overflow: hidden; text-decoration: none; font-size: 14px } .account__wrapper { display: flex } .account__avatar-wrapper { float: left; margin-left: 12px; margin-right: 12px } .account__avatar { border-radius: 4px; background: transparent no-repeat; background-position: 50%; background-clip: padding-box; display: block; position: relative; width: 36px; height: 36px; background-size: 36px 36px } .account__avatar-inline { display: inline-block; vertical-align: middle; margin-right: 5px } .account__avatar-composite { border-radius: 4px; background: transparent no-repeat; background-position: 50%; background-clip: padding-box; border-radius: 50%; overflow: hidden; position: relative } .account__avatar-composite>div { float: left; position: relative; box-sizing: border-box } .account__avatar-composite__label { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-shadow: 1px 1px 2px #000; font-weight: 700; font-size: 15px } a .account__avatar { cursor: pointer } .account__avatar-overlay { width: 48px; height: 48px; background-size: 48px 48px } .account__avatar-overlay-base { border-radius: 4px; background: transparent no-repeat; background-position: 50%; background-clip: padding-box; width: 36px; height: 36px; background-size: 36px 36px } .account__avatar-overlay-base img { width: 100%; height: 100% } .account__avatar-overlay-base img, .account__avatar-overlay-overlay { border-radius: 4px; background: transparent no-repeat; background-position: 50%; background-clip: padding-box } .account__avatar-overlay-overlay { width: 24px; height: 24px; background-size: 24px 24px; position: absolute; bottom: 0; right: 0; z-index: 1 } .account__avatar-overlay-overlay img { border-radius: 4px; background: transparent no-repeat; background-position: 50%; background-clip: padding-box; width: 100%; height: 100% } .account__relationship { height: 18px; padding: 10px; white-space: nowrap } .account__disclaimer { padding: 10px; border-top: 1px solid #393f4f; color: #606984 } .account__disclaimer strong { font-weight: 500 } .account__disclaimer strong:lang(ja), .account__disclaimer strong:lang(ko), .account__disclaimer strong:lang(zh-CN), .account__disclaimer strong:lang(zh-HK), .account__disclaimer strong:lang(zh-TW) { font-weight: 700 } .account__disclaimer a { font-weight: 500; color: inherit; text-decoration: underline } .account__disclaimer a:active, .account__disclaimer a:focus, .account__disclaimer a:hover { text-decoration: none } .account__action-bar { border-top: 1px solid #393f4f; border-bottom: 1px solid #393f4f; line-height: 36px; overflow: hidden; flex: 0 0 auto; display: flex } .account__action-bar-dropdown { padding: 10px } .account__action-bar-dropdown .icon-button { vertical-align: middle } .account__action-bar-dropdown .dropdown--active .dropdown__content.dropdown__right { left: 6px; right: auto } .account__action-bar-dropdown .dropdown--active:after { bottom: auto; margin-left: 11px; margin-top: -7px; right: auto } .account__action-bar-links { display: flex; flex: 1 1 auto; line-height: 18px; text-align: center } .account__action-bar__tab { text-decoration: none; overflow: hidden; flex: 0 1 100%; border-right: 1px solid #393f4f; padding: 10px 0; border-bottom: 4px solid transparent } .account__action-bar__tab.active { border-bottom: 4px solid #2b90d9 } .account__action-bar__tab>span { display: block; text-transform: uppercase; font-size: 11px; color: #9baec8 } .account__action-bar__tab strong { display: block; font-size: 15px; font-weight: 500; color: #fff } .account__action-bar__tab strong:lang(ja), .account__action-bar__tab strong:lang(ko), .account__action-bar__tab strong:lang(zh-CN), .account__action-bar__tab strong:lang(zh-HK), .account__action-bar__tab strong:lang(zh-TW) { font-weight: 700 } .account-authorize { padding: 14px 10px } .account-authorize .detailed-status__display-name { display: block; margin-bottom: 15px; overflow: hidden } .account-authorize__avatar { float: left; margin-right: 10px } .account__display-name, .detailed-status__application, .detailed-status__datetime, .detailed-status__display-name, .status__display-name, .status__relative-time { text-decoration: none } .account__display-name strong, .status__display-name strong { color: #fff } .muted .emojione { opacity: .5 } .detailed-status__display-name:hover strong, .reply-indicator__display-name:hover strong, .status__display-name:hover strong, a.account__display-name:hover strong { text-decoration: underline } .account__display-name strong { display: block; overflow: hidden; text-overflow: ellipsis } .detailed-status__application, .detailed-status__datetime { color: inherit } .detailed-status .button.logo-button { margin-bottom: 15px } .detailed-status__display-name { color: #505050; /* oloturia account */ display: block; line-height: 24px; margin-bottom: 15px; overflow: hidden } .detailed-status__display-name span, .detailed-status__display-name strong { display: block; text-overflow: ellipsis; overflow: hidden } .detailed-status__display-name strong { font-size: 16px; color: #000000 /* oloturia name */ } .detailed-status__display-avatar { float: left; margin-right: 10px } .status__avatar { height: 48px; left: 10px; position: absolute; top: 10px; width: 48px } .status__expand { width: 68px; position: absolute; left: 0; top: 0; height: 100%; cursor: pointer } .muted .status__content, .muted .status__content a, .muted .status__content p, .muted .status__display-name strong { color: #606984 } .muted .status__avatar { opacity: .5 } .muted a.status__content__spoiler-link { background: #606984; color: #282c37 } .muted a.status__content__spoiler-link:hover { background: #707b97; text-decoration: none } .notification__message { margin: 0 10px 0 68px; padding: 8px 0 0; cursor: default; color: #9baec8; font-size: 15px; line-height: 22px; position: relative } .notification__message .fa { color: #2b90d9 } .notification__message>span { display: inline; overflow: hidden; text-overflow: ellipsis } .notification__favourite-icon-wrapper { left: -26px; position: absolute } .icon-button.star-icon.active, .notification__favourite-icon-wrapper .star-icon { color: #ca8f04 } .icon-button.bookmark-icon.active { color: #ff5050 } .no-reduce-motion .icon-button.star-icon.activate>.fa-star { -webkit-animation: spring-rotate-in 1s linear; animation: spring-rotate-in 1s linear } .no-reduce-motion .icon-button.star-icon.deactivate>.fa-star { -webkit-animation: spring-rotate-out 1s linear; animation: spring-rotate-out 1s linear } .notification__display-name { color: inherit; font-weight: 500; text-decoration: none } .notification__display-name:hover { color: #fff; text-decoration: underline } .notification__relative_time { float: right } .display-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .display-name__html { font-weight: 500 } .display-name__account { font-size: 14px } .detailed-status__datetime:hover, .status__relative-time:hover { text-decoration: underline } .image-loader { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column } .image-loader, .image-loader * { scrollbar-width: none; -ms-overflow-style: none } .image-loader::-webkit-scrollbar, .image-loader ::-webkit-scrollbar { width: 0; height: 0; background: transparent } .image-loader .image-loader__preview-canvas { max-width: 100%; max-height: 80%; background: url(/packs/media/images/void-a9c15ae00440e4b0b3373fd738a29c33.png) repeat; -o-object-fit: contain; font-family: "object-fit:contain"; object-fit: contain } .image-loader .loading-bar { position: relative } .image-loader.image-loader--amorphous .image-loader__preview-canvas { display: none } .zoomable-image { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center } .zoomable-image img { max-width: 100%; max-height: 80%; width: auto; height: auto; -o-object-fit: contain; font-family: "object-fit:contain"; object-fit: contain } .navigation-bar { padding: 10px; display: flex; align-items: center; flex-shrink: 0; cursor: default; color: #9baec8 } .navigation-bar strong { color: #d9e1e8 } .navigation-bar a { color: inherit } .navigation-bar .permalink { text-decoration: none } .navigation-bar .navigation-bar__actions { position: relative } .navigation-bar .navigation-bar__actions .icon-button.close { position: absolute; pointer-events: none; transform: scaleX(0) translate(-100%); opacity: 0 } .navigation-bar .navigation-bar__actions .compose__action-bar .icon-button { pointer-events: auto; transform: scale(1) translate(0); opacity: 1 } .navigation-bar__profile { flex: 1 1 auto; margin-left: 8px; line-height: 20px; margin-top: -1px; overflow: hidden } .navigation-bar__profile-account { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis } .navigation-bar__profile-edit { color: inherit; text-decoration: none } .dropdown { display: inline-block } .dropdown__content { display: none; position: absolute } .dropdown-menu__separator { border-bottom: 1px solid #c0cdd9; margin: 5px 7px 6px; height: 0 } .dropdown-menu { background: #d9e1e8; padding: 4px 0; border-radius: 4px; box-shadow: 2px 4px 15px rgba(0, 0, 0, .4); z-index: 9999 } .dropdown-menu ul { list-style: none } .dropdown-menu.left { transform-origin: 100% 50% } .dropdown-menu.top { transform-origin: 50% 100% } .dropdown-menu.bottom { transform-origin: 50% 0 } .dropdown-menu.right { transform-origin: 0 50% } .dropdown-menu__arrow { position: absolute; width: 0; height: 0; border: 0 solid transparent } .dropdown-menu__arrow.left { right: -5px; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #d9e1e8 } .dropdown-menu__arrow.top { bottom: -5px; margin-left: -7px; border-width: 5px 7px 0; border-top-color: #d9e1e8 } .dropdown-menu__arrow.bottom { top: -5px; margin-left: -7px; border-width: 0 7px 5px; border-bottom-color: #d9e1e8 } .dropdown-menu__arrow.right { left: -5px; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #d9e1e8 } .dropdown-menu__item a { font-size: 13px; line-height: 18px; display: block; padding: 4px 14px; box-sizing: border-box; text-decoration: none; background: #d9e1e8; color: #282c37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover { background: #2b90d9; color: #d9e1e8; outline: 0 } .dropdown--active .dropdown__content { display: block; line-height: 18px; max-width: 311px; right: 0; text-align: left; z-index: 9999 } .dropdown--active .dropdown__content>ul { list-style: none; background: #d9e1e8; padding: 4px 0; border-radius: 4px; box-shadow: 0 0 15px rgba(0, 0, 0, .4); min-width: 140px; position: relative } .dropdown--active .dropdown__content.dropdown__right { right: 0 } .dropdown--active .dropdown__content.dropdown__left>ul { left: -98px } .dropdown--active .dropdown__content>ul>li>a { font-size: 13px; line-height: 18px; display: block; padding: 4px 14px; box-sizing: border-box; text-decoration: none; background: #d9e1e8; color: #282c37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .dropdown--active .dropdown__content>ul>li>a:focus { outline: 0 } .dropdown--active .dropdown__content>ul>li>a:hover { background: #2b90d9; color: #d9e1e8 } .dropdown__icon { vertical-align: middle } .columns-area { display: flex; flex: 1 1 auto; flex-direction: row; justify-content: flex-start; overflow-x: auto; position: relative } .columns-area.unscrollable { overflow-x: hidden } .columns-area__panels { display: flex; justify-content: center; width: 100%; height: 100%; min-height: 100vh } .columns-area__panels__pane { height: 100%; overflow: hidden; pointer-events: none; display: flex; justify-content: flex-end; min-width: 285px } .columns-area__panels__pane--start { justify-content: flex-start } .columns-area__panels__pane__inner { position: fixed; width: 285px; pointer-events: auto; height: 100% } .columns-area__panels__main { box-sizing: border-box; width: 100%; max-width: 600px; flex: 0 0 auto; display: flex; flex-direction: column } @media screen and (min-width:415px) { .columns-area__panels__main { padding: 0 10px } } .tabs-bar__wrapper { background: #17191f; position: -webkit-sticky; position: sticky; top: 0; z-index: 2; padding-top: 0 } @media screen and (min-width:415px) { .tabs-bar__wrapper { padding-top: 10px } } .tabs-bar__wrapper .tabs-bar { margin-bottom: 0 } @media screen and (min-width:415px) { .tabs-bar__wrapper .tabs-bar { margin-bottom: 10px } } .react-swipeable-view-container, .react-swipeable-view-container .column, .react-swipeable-view-container .columns-area, .react-swipeable-view-container .drawer { height: 100% } .react-swipeable-view-container>* { display: flex; align-items: center; justify-content: center; height: 100% } .column { width: 350px; position: relative; box-sizing: border-box; display: flex; flex-direction: column } .column>.scrollable { background: #282c37 } .ui { flex: 0 0 auto; flex-direction: column; width: 100%; height: 100% } .drawer, .ui { display: flex } .drawer { width: 300px; box-sizing: border-box; flex-direction: column; overflow-y: hidden } .drawer__tab { display: block; flex: 1 1 auto; padding: 15px 5px 13px; color: #9baec8; text-decoration: none; text-align: center; font-size: 16px; border-bottom: 2px solid transparent } .column, .drawer { flex: 1 1 100%; overflow: hidden } @media screen and (min-width:631px) { .columns-area { padding: 0 } .column, .drawer { flex: 0 0 auto; padding: 10px 5px } .column:first-child, .drawer:first-child { padding-left: 10px } .column:last-child, .drawer:last-child { padding-right: 10px } .columns-area>div .column, .columns-area>div .drawer { padding-left: 5px; padding-right: 5px } } .tabs-bar { box-sizing: border-box; display: flex; background: #393f4f; flex: 0 0 auto; overflow-y: auto } .tabs-bar__link { display: block; flex: 1 1 auto; padding: 15px 10px 13px; color: #fff; text-decoration: none; text-align: center; font-size: 14px; font-weight: 500; border-bottom: 2px solid #393f4f; transition: all 50ms linear; transition-property: border-bottom, background, color } .tabs-bar__link .fa { font-weight: 400; font-size: 16px } @media screen and (min-width:631px) { .tabs-bar__link:active, .tabs-bar__link:focus, .tabs-bar__link:hover { background: #464d60; border-bottom-color: #464d60 } } .tabs-bar__link.active { border-bottom: 2px solid #2b90d9; color: #2b90d9 } .tabs-bar__link span { margin-left: 5px; display: none } @media screen and (min-width:600px) { .tabs-bar__link span { display: inline } } .columns-area--mobile { flex-direction: column; width: 100%; height: 100%; margin: 0 auto } .columns-area--mobile .column, .columns-area--mobile .drawer { width: 100%; height: 100%; padding: 0 } .columns-area--mobile .directory__list { display: grid; grid-gap: 10px; grid-template-columns: minmax(0, 50%) minmax(0, 50%) } @media screen and (max-width:415px) { .columns-area--mobile .directory__list { display: block } } .columns-area--mobile .directory__card { margin-bottom: 0 } .columns-area--mobile .filter-form { display: flex } .columns-area--mobile .autosuggest-textarea__textarea { font-size: 16px } .columns-area--mobile .search__input { line-height: 18px; font-size: 16px; padding: 15px 30px 15px 15px } .columns-area--mobile .search__icon .fa { top: 15px } .columns-area--mobile .scrollable { overflow: visible } @supports(display:grid) { .columns-area--mobile .scrollable { contain: content } } @media screen and (min-width:415px) { .columns-area--mobile { padding: 0 0 10px } } @media screen and (min-width:630px) { .columns-area--mobile .detailed-status { padding: 15px } .columns-area--mobile .detailed-status .audio-player, .columns-area--mobile .detailed-status .media-gallery, .columns-area--mobile .detailed-status .video-player { margin-top: 15px } .columns-area--mobile .account__header__bar { padding: 5px 10px } .columns-area--mobile .compose-form, .columns-area--mobile .navigation-bar { padding: 15px } .columns-area--mobile .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 15px } .columns-area--mobile .status { padding: 15px 15px 15px 78px; min-height: 50px } .columns-area--mobile .status__avatar { left: 15px; top: 17px } .columns-area--mobile .status__content { padding-top: 5px } .columns-area--mobile .status__prepend { margin-left: 78px; padding-top: 15px } .columns-area--mobile .status__prepend-icon-wrapper { left: -32px } .columns-area--mobile .status .audio-player, .columns-area--mobile .status .media-gallery, .columns-area--mobile .status .video-player, .columns-area--mobile .status__action-bar { margin-top: 10px } .columns-area--mobile .account { padding: 15px 10px } .columns-area--mobile .account__header__bio { margin: 0 -10px } .columns-area--mobile .notification__message { margin-left: 78px; padding-top: 15px } .columns-area--mobile .notification__favourite-icon-wrapper { left: -32px } .columns-area--mobile .notification .account, .columns-area--mobile .notification .status { padding-top: 8px } .columns-area--mobile .notification .account__avatar-wrapper { margin-left: 17px; margin-right: 15px } } .floating-action-button { position: fixed; display: flex; justify-content: center; align-items: center; width: 3.9375rem; height: 3.9375rem; bottom: 1.3125rem; right: 1.3125rem; background: #2588d0; color: #fff; border-radius: 50%; font-size: 21px; line-height: 21px; text-decoration: none; box-shadow: 2px 3px 9px rgba(0, 0, 0, .4) } .floating-action-button:active, .floating-action-button:focus, .floating-action-button:hover { background: #49a0de } @media screen and (min-width:415px) { .tabs-bar { width: 100% } .react-swipeable-view-container .columns-area--mobile { height: calc(100% - 10px)!important } .getting-started__wrapper, .search { margin-bottom: 10px } } @media screen and (max-width:895px) { .columns-area__panels__pane--compositional { display: none } } @media screen and (min-width:895px) { .floating-action-button, .search-page .search, .tabs-bar__link.optional { display: none } } @media screen and (max-width:1190px) { .columns-area__panels__pane--navigational { display: none } } @media screen and (min-width:1190px) { .tabs-bar { display: none } } .icon-with-badge { position: relative } .icon-with-badge__badge { position: absolute; left: 9px; top: -13px; background: #2b90d9; border: 2px solid #393f4f; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 500; line-height: 14px; color: #fff } .icon-with-badge__issue-badge { position: absolute; left: 11px; bottom: 1px; display: block; background: #df405a; border-radius: 50%; width: .625rem; height: .625rem } .column-link--transparent .icon-with-badge__badge { border-color: #17191f } .compose-panel { width: 285px; margin-top: 10px; display: flex; flex-direction: column; height: calc(100% - 10px); overflow-y: hidden } .compose-panel .navigation-bar { padding-top: 20px; padding-bottom: 20px; flex: 0 1 48px; min-height: 20px } .compose-panel .flex-spacer { background: transparent } .compose-panel .compose-form { flex: 1; overflow-y: hidden; display: flex; flex-direction: column; min-height: 310px; padding-bottom: 71px; margin-bottom: -71px } .compose-panel .compose-form__autosuggest-wrapper { overflow-y: auto; background-color: #fff; border-radius: 4px 4px 0 0; flex: 0 1 auto } .compose-panel .autosuggest-textarea__textarea { overflow-y: hidden } .compose-panel .compose-form__upload-thumbnail { height: 80px } .navigation-panel { margin-top: 10px; margin-bottom: 10px; height: calc(100% - 20px); overflow-y: auto; display: flex; flex-direction: column } .navigation-panel>a { flex: 0 0 auto } .navigation-panel hr { flex: 0 0 auto; border: 0; border-top: 1px solid #313543; margin: 10px 0 } .navigation-panel .flex-spacer, .navigation-panel hr { background: transparent } .drawer__pager { flex-grow: 1; position: relative } .drawer__inner, .drawer__pager { box-sizing: border-box; padding: 0; overflow: hidden; display: flex } .drawer__inner { position: absolute; top: 0; left: 0; background: #444b5d; flex-direction: column; overflow-y: auto; width: 100%; height: 100% } .drawer__inner.darker { background: #282c37 } .drawer__inner__mastodon { background: #444b5d url('data:image/svg+xml;utf8,') no-repeat bottom/100% auto; flex: 1; min-height: 47px; display: none } .drawer__inner__mastodon>img { display: block; -o-object-fit: contain; font-family: "object-fit:contain;object-position:bottom left"; object-fit: contain; -o-object-position: bottom left; object-position: bottom left; width: 85%; height: 100%; pointer-events: none; user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } @media screen and (min-height:640px) { .drawer__inner__mastodon { display: block } } .pseudo-drawer { background: #444b5d; font-size: 13px; text-align: left } .drawer__header { flex: 0 0 auto; font-size: 16px; background: #393f4f; margin-bottom: 10px; display: flex; flex-direction: row } .drawer__header a { transition: background .1s ease-in } .drawer__header a:hover { background: #2e3340; transition: background .2s ease-out } .scrollable { overflow-y: scroll; overflow-x: hidden; flex: 1 1 auto; -webkit-overflow-scrolling: touch } .scrollable.optionally-scrollable { overflow-y: auto } @supports(display:grid) { .scrollable { contain: strict } } .scrollable--flex { display: flex; flex-direction: column } .scrollable__append { flex: 1 1 auto; position: relative; min-height: 120px } @supports(display:grid) { .scrollable.fullscreen { contain: none } } .column-back-button { box-sizing: border-box; width: 100%; background: #313543; color: #2b90d9; cursor: pointer; flex: 0 0 auto; font-size: 16px; line-height: inherit; border: 0; text-align: unset; padding: 15px; margin: 0; z-index: 3; outline: 0 } .column-back-button:hover { text-decoration: underline } .column-header__back-button { background: #313543; border: 0; font-family: inherit; color: #2b90d9; cursor: pointer; white-space: nowrap; font-size: 16px; padding: 0 5px 0 0; z-index: 3 } .column-header__back-button:hover { text-decoration: underline } .column-header__back-button:last-child { padding: 0 15px 0 0 } .column-back-button__icon { display: inline-block; margin-right: 5px } .column-back-button--slim { position: relative } .column-back-button--slim-button { cursor: pointer; flex: 0 0 auto; font-size: 16px; padding: 15px; position: absolute; right: 0; top: -48px } .react-toggle { display: inline-block; position: relative; cursor: pointer; background-color: transparent; border: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent } .react-toggle-screenreader-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px } .react-toggle--disabled { cursor: not-allowed; opacity: .5; transition: opacity .25s } .react-toggle-track { width: 50px; height: 24px; padding: 0; border-radius: 30px; background-color: #282c37; transition: background-color .2s ease } .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: #131419 } .react-toggle--checked .react-toggle-track { background-color: #2b90d9 } .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: #56a7e1 } .react-toggle-track-check { position: absolute; width: 14px; height: 10px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; line-height: 0; left: 8px; opacity: 0; transition: opacity .25s ease } .react-toggle--checked .react-toggle-track-check, .react-toggle-track-x { opacity: 1; transition: opacity .25s ease } .react-toggle-track-x { position: absolute; width: 10px; height: 10px; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; line-height: 0; right: 10px } .react-toggle--checked .react-toggle-track-x { opacity: 0 } .react-toggle-thumb { position: absolute; top: 1px; left: 1px; width: 22px; height: 22px; border: 1px solid #282c37; border-radius: 50%; background-color: #fafafa; box-sizing: border-box; transition: all .25s ease; transition-property: border-color, left } .react-toggle--checked .react-toggle-thumb { left: 27px; border-color: #2b90d9 } .column-link { background: #393f4f; color: #fff; display: block; font-size: 16px; padding: 15px; text-decoration: none } .column-link:active, .column-link:focus, .column-link:hover { background: #404657 } .column-link:focus { outline: 0 } .column-link--transparent { background: transparent; color: #d9e1e8 } .column-link--transparent:active, .column-link--transparent:focus, .column-link--transparent:hover { background: transparent; color: #fff } .column-link--transparent.active { color: #2b90d9 } .column-link__icon { display: inline-block; margin-right: 5px } .column-link__badge { display: inline-block; border-radius: 4px; line-height: 19px; padding: 4px 8px; margin: -6px 10px } .column-link__badge, .column-subheading { font-size: 12px; font-weight: 500; background: #282c37 } .column-subheading { color: #606984; padding: 8px 20px; text-transform: uppercase; cursor: default } .flex-spacer, .getting-started, .getting-started__wrapper { background: #282c37 } .getting-started__wrapper { flex: 0 0 auto } .flex-spacer { flex: 1 1 auto } .getting-started { color: #606984; overflow: auto } .getting-started__footer { flex: 0 0 auto; padding: 20px 10px 10px } .getting-started__footer ul { margin-bottom: 10px } .getting-started__footer ul li { display: inline } .getting-started__footer p { color: #606984; font-size: 13px; margin-bottom: 20px } .getting-started__footer p a { color: #606984; text-decoration: underline } .getting-started__footer a { text-decoration: none; color: #9baec8 } .getting-started__footer a:active, .getting-started__footer a:focus, .getting-started__footer a:hover { text-decoration: underline } .getting-started__trends { flex: 0 1 auto; opacity: 1; -webkit-animation: fade .15s linear; animation: fade .15s linear; margin-top: 10px } .getting-started__trends h4 { font-size: 12px; text-transform: uppercase; color: #9baec8; padding: 10px; font-weight: 500; border-bottom: 1px solid #393f4f } @media screen and (max-height:810px) { .getting-started__trends .trends__item:nth-child(3) { display: none } } @media screen and (max-height:720px) { .getting-started__trends .trends__item:nth-child(2) { display: none } } @media screen and (max-height:670px) { .getting-started__trends { display: none } } .getting-started__trends .trends__item { border-bottom: 0; padding: 10px } .getting-started__trends .trends__item__current { color: #9baec8 } .keyboard-shortcuts { padding: 8px 0 0; overflow: hidden } .keyboard-shortcuts thead { position: absolute; left: -9999px } .keyboard-shortcuts td { padding: 0 10px 8px } .keyboard-shortcuts kbd { display: inline-block; padding: 3px 5px; background-color: #393f4f; border: 1px solid #1f232b } .setting-text { display: block; box-sizing: border-box; width: 100%; margin: 0; color: #282c37; background: #fff; padding: 10px; font-family: inherit; font-size: 14px; resize: vertical; border: 0; outline: 0; border-radius: 4px } .setting-text:focus { outline: 0 } @media screen and (max-width:600px) { .setting-text { font-size: 16px } } button.icon-button i.fa-retweet { background-position: 0 0; height: 19px; transition: background-position .9s steps(10); transition-duration: 0s; vertical-align: middle; width: 22px } button.icon-button i.fa-retweet:before { display: none!important } button.icon-button.active i.fa-retweet { transition-duration: .9s; background-position: 0 100% } .reduce-motion button.icon-button.active i.fa-retweet, .reduce-motion button.icon-button i.fa-retweet { transition: none } .status-card { position: relative; display: flex; font-size: 14px; border: 1px solid #393f4f; border-radius: 4px; color: #606984; margin-top: 14px; text-decoration: none; overflow: hidden } .status-card__actions { bottom: 0; left: 0; position: absolute; right: 0; top: 0 } .status-card__actions, .status-card__actions>div { display: flex; justify-content: center; align-items: center } .status-card__actions>div { background: rgba(0, 0, 0, .6); border-radius: 8px; padding: 12px 9px; flex: 0 0 auto } .status-card__actions a, .status-card__actions button { display: inline; color: #d9e1e8; background: transparent; border: 0; padding: 0 8px; text-decoration: none; font-size: 18px; line-height: 18px } .status-card__actions a:active, .status-card__actions a:focus, .status-card__actions a:hover, .status-card__actions button:active, .status-card__actions button:focus, .status-card__actions button:hover { color: #fff } .status-card__actions a { font-size: 19px; position: relative; bottom: -1px } a.status-card { cursor: pointer } a.status-card:hover { background: #393f4f } .status-card-photo { cursor: zoom-in; display: block; text-decoration: none; width: 100%; height: auto; margin: 0 } .status-card-video iframe { width: 100%; height: 100% } .status-card__title { display: block; font-weight: 500; margin-bottom: 5px; color: #9baec8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none } .status-card__content { flex: 1 1 auto; overflow: hidden; padding: 14px 14px 14px 8px } .status-card__description { color: #9baec8 } .status-card__host { display: block; margin-top: 5px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .status-card__image { flex: 0 0 100px; background: #393f4f; position: relative } .status-card__image>.fa { font-size: 21px; position: absolute; transform-origin: 50% 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) } .status-card.horizontal { display: block } .status-card.horizontal .status-card__image { width: 100% } .status-card.horizontal .status-card__image-image, .status-card.horizontal .status-card__image-preview { border-radius: 4px 4px 0 0 } .status-card.horizontal .status-card__title { white-space: inherit } .status-card.compact { border-color: #313543 } .status-card.compact.interactive { border: 0 } .status-card.compact .status-card__content { padding: 10px 8px 8px } .status-card.compact .status-card__title { white-space: nowrap } .status-card.compact .status-card__image { flex: 0 0 60px } a.status-card.compact:hover { background-color: #313543 } .status-card__image-image { -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; background-size: cover; background-position: 50% } .status-card__image-image, .status-card__image-preview { border-radius: 4px 0 0 4px; display: block; margin: 0; width: 100%; height: 100% } .status-card__image-preview { -o-object-fit: fill; font-family: "object-fit:fill"; object-fit: fill; position: absolute; top: 0; left: 0; z-index: 0; background: #000 } .status-card__image-preview--hidden { display: none } .load-more { display: block; color: #606984; background-color: transparent; border: 0; font-size: inherit; text-align: center; line-height: inherit; margin: 0; padding: 15px; box-sizing: border-box; width: 100%; clear: both; text-decoration: none } .load-more:hover { background: #2c313d } .load-gap { border-bottom: 1px solid #393f4f } .timeline-hint { text-align: center; color: #9baec8; padding: 15px; box-sizing: border-box; width: 100%; cursor: default } .timeline-hint strong { font-weight: 500 } .timeline-hint a { color: #4ea2df; text-decoration: none } .timeline-hint a:active, .timeline-hint a:focus, .timeline-hint a:hover { text-decoration: underline; color: #5fabe2 } .regeneration-indicator { text-align: center; font-size: 16px; font-weight: 500; color: #606984; background: #282c37; cursor: default; display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; padding: 20px } .regeneration-indicator__figure, .regeneration-indicator__figure img { display: block; width: auto; height: 160px; margin: 0 } .regeneration-indicator--without-header { padding-top: 68px } .regeneration-indicator__label { margin-top: 30px } .regeneration-indicator__label strong { display: block; margin-bottom: 10px; color: #606984 } .regeneration-indicator__label span { font-size: 15px; font-weight: 400 } .column-header__wrapper { position: relative; flex: 0 0 auto; z-index: 1 } .column-header__wrapper.active { box-shadow: 0 1px 0 rgba(43, 144, 217, .3) } .column-header__wrapper.active:before { display: block; content: ""; position: absolute; bottom: -13px; left: 0; right: 0; margin: 0 auto; width: 60%; pointer-events: none; height: 28px; z-index: 1; background: radial-gradient(ellipse, rgba(43, 144, 217, .23) 0, rgba(43, 144, 217, 0) 60%) } .column-header__wrapper .announcements { z-index: 1; position: relative } .column-header { display: flex; font-size: 16px; background: #313543; flex: 0 0 auto; cursor: pointer; position: relative; z-index: 2; outline: 0; overflow: hidden } .column-header>button { margin: 0; border: 0; padding: 15px 0 15px 15px; color: inherit; background: transparent; font: inherit; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex: 1 } .column-header>.column-header__back-button { color: #2b90d9 } .column-header.active .column-header__icon { color: #2b90d9; text-shadow: 0 0 10px rgba(43, 144, 217, .4) } .column-header:active, .column-header:focus { outline: 0 } .column-header__buttons { height: 48px; display: flex } .column-header__links { margin-bottom: 14px } .column-header__links .text-btn { margin-right: 10px } .column-header__button { background: #313543; border: 0; color: #9baec8; cursor: pointer; font-size: 16px; padding: 0 15px } .column-header__button:hover { color: #b2c1d5 } .column-header__button.active, .column-header__button.active:hover { color: #fff; background: #393f4f } .column-header__collapsible { max-height: 70vh; overflow: hidden; overflow-y: auto; color: #9baec8; transition: max-height .15s ease-in-out, opacity .3s linear; opacity: 1; z-index: 1; position: relative } .column-header__collapsible.collapsed { max-height: 0; opacity: .5 } .column-header__collapsible.animating { overflow-y: hidden } .column-header__collapsible hr { height: 0; background: transparent; border: 0; border-top: 1px solid #42485a; margin: 10px 0 } .column-header__collapsible-inner { background: #393f4f; padding: 15px } .column-header__setting-btn:hover { color: #9baec8; text-decoration: underline } .column-header__permission-btn { display: inline; font-weight: inherit; text-decoration: underline } .column-header__setting-arrows { float: right } .column-header__setting-arrows .column-header__setting-btn { padding: 0 10px } .column-header__setting-arrows .column-header__setting-btn:last-child { padding-right: 0 } .text-btn { display: inline-block; padding: 0; font-family: inherit; font-size: inherit; color: inherit; border: 0; background: transparent; cursor: pointer } .column-header__issue-btn { color: #ff5050 } .column-header__issue-btn:hover { color: #df405a; text-decoration: underline } .column-header__icon { display: inline-block; margin-right: 5px } .loading-indicator { color: #606984; font-size: 12px; font-weight: 400; text-transform: uppercase; overflow: visible; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } .loading-indicator span { display: block; float: left; transform: translateX(-50%); margin: 82px 0 0 50%; white-space: nowrap } .loading-indicator__figure { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; box-sizing: border-box; background-color: transparent; border: 6px solid #606984; border-radius: 50% } .no-reduce-motion .loading-indicator span { -webkit-animation: loader-label 1.15s cubic-bezier(.215, .61, .355, 1) infinite; animation: loader-label 1.15s cubic-bezier(.215, .61, .355, 1) infinite } .no-reduce-motion .loading-indicator__figure { -webkit-animation: loader-figure 1.15s cubic-bezier(.215, .61, .355, 1) infinite; animation: loader-figure 1.15s cubic-bezier(.215, .61, .355, 1) infinite } @-webkit-keyframes spring-rotate-in { 0% { transform: rotate(0deg) } 30% { transform: rotate(-484.8deg) } 60% { transform: rotate(-316.7deg) } 90% { transform: rotate(-375deg) } to { transform: rotate(-1turn) } } @keyframes spring-rotate-in { 0% { transform: rotate(0deg) } 30% { transform: rotate(-484.8deg) } 60% { transform: rotate(-316.7deg) } 90% { transform: rotate(-375deg) } to { transform: rotate(-1turn) } } @-webkit-keyframes spring-rotate-out { 0% { transform: rotate(-1turn) } 30% { transform: rotate(124.8deg) } 60% { transform: rotate(-43.27deg) } 90% { transform: rotate(15deg) } to { transform: rotate(0deg) } } @keyframes spring-rotate-out { 0% { transform: rotate(-1turn) } 30% { transform: rotate(124.8deg) } 60% { transform: rotate(-43.27deg) } 90% { transform: rotate(15deg) } to { transform: rotate(0deg) } } @-webkit-keyframes loader-figure { 0% { width: 0; height: 0; background-color: #606984 } 29% { background-color: #606984 } 30% { width: 42px; height: 42px; background-color: transparent; border-width: 21px; opacity: 1 } to { width: 42px; height: 42px; border-width: 0; opacity: 0; background-color: transparent } } @keyframes loader-figure { 0% { width: 0; height: 0; background-color: #606984 } 29% { background-color: #606984 } 30% { width: 42px; height: 42px; background-color: transparent; border-width: 21px; opacity: 1 } to { width: 42px; height: 42px; border-width: 0; opacity: 0; background-color: transparent } } @-webkit-keyframes loader-label { 0% { opacity: .25 } 30% { opacity: 1 } to { opacity: .25 } } @keyframes loader-label { 0% { opacity: .25 } 30% { opacity: 1 } to { opacity: .25 } } .video-error-cover { align-items: center; background: #000; color: #fff; cursor: pointer; display: flex; flex-direction: column; height: 100%; justify-content: center; margin-top: 8px; position: relative; text-align: center; z-index: 100 } .media-spoiler { background: #000; color: #9baec8; border: 0; padding: 0; width: 100%; height: 100%; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none } .media-spoiler:active, .media-spoiler:focus, .media-spoiler:hover { padding: 0; color: #b5c3d6 } .media-spoiler__warning { display: block; font-size: 14px } .media-spoiler__trigger { display: block; font-size: 11px; font-weight: 700 } .spoiler-button { top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 100 } .spoiler-button--minified { display: block; left: 4px; top: 4px; width: auto; height: auto } .spoiler-button--click-thru { pointer-events: none } .spoiler-button--hidden { display: none } .spoiler-button__overlay { display: block; background: transparent; width: 100%; height: 100%; border: 0 } .spoiler-button__overlay__label { display: inline-block; background: rgba(0, 0, 0, .5); border-radius: 8px; padding: 8px 12px; color: #fff; font-weight: 500; font-size: 14px } .spoiler-button__overlay:active .spoiler-button__overlay__label, .spoiler-button__overlay:focus .spoiler-button__overlay__label, .spoiler-button__overlay:hover .spoiler-button__overlay__label { background: rgba(0, 0, 0, .8) } .spoiler-button__overlay:disabled .spoiler-button__overlay__label { background: rgba(0, 0, 0, .5) } .modal-container--preloader { background: #393f4f } .account--panel { background: #313543; border-top: 1px solid #393f4f; border-bottom: 1px solid #393f4f; display: flex; flex-direction: row; padding: 10px 0 } .account--panel__button, .detailed-status__button { flex: 1 1 auto; text-align: center } .column-settings__outer { background: #393f4f; padding: 15px } .column-settings__section { color: #9baec8; cursor: default; display: block; font-weight: 500; margin-bottom: 10px } .column-settings__hashtags .column-settings__row, .column-settings__row--with-margin { margin-bottom: 15px } .column-settings__hashtags .column-select__control { outline: 0; box-sizing: border-box; width: 100%; border: 0; box-shadow: none; font-family: inherit; background: #282c37; color: #9baec8; font-size: 14px; margin: 0 } .column-settings__hashtags .column-select__control::-webkit-input-placeholder { color: #a8b9cf } .column-settings__hashtags .column-select__control::-moz-placeholder { color: #a8b9cf } .column-settings__hashtags .column-select__control:-ms-input-placeholder { color: #a8b9cf } .column-settings__hashtags .column-select__control::placeholder { color: #a8b9cf } .column-settings__hashtags .column-select__control::-moz-focus-inner { border: 0 } .column-settings__hashtags .column-select__control::-moz-focus-inner, .column-settings__hashtags .column-select__control:active, .column-settings__hashtags .column-select__control:focus { outline: 0!important } .column-settings__hashtags .column-select__control:focus { background: #313543 } @media screen and (max-width:600px) { .column-settings__hashtags .column-select__control { font-size: 16px } } .column-settings__hashtags .column-select__placeholder { color: #606984; padding-left: 2px; font-size: 12px } .column-settings__hashtags .column-select__value-container { padding-left: 6px } .column-settings__hashtags .column-select__multi-value { background: #393f4f } .column-settings__hashtags .column-select__multi-value__remove { cursor: pointer } .column-settings__hashtags .column-select__multi-value__remove:active, .column-settings__hashtags .column-select__multi-value__remove:focus, .column-settings__hashtags .column-select__multi-value__remove:hover { background: #42485a; color: #a8b9cf } .column-settings__hashtags .column-select__input, .column-settings__hashtags .column-select__multi-value__label { color: #9baec8 } .column-settings__hashtags .column-select__clear-indicator, .column-settings__hashtags .column-select__dropdown-indicator { cursor: pointer; transition: none; color: #606984 } .column-settings__hashtags .column-select__clear-indicator:active, .column-settings__hashtags .column-select__clear-indicator:focus, .column-settings__hashtags .column-select__clear-indicator:hover, .column-settings__hashtags .column-select__dropdown-indicator:active, .column-settings__hashtags .column-select__dropdown-indicator:focus, .column-settings__hashtags .column-select__dropdown-indicator:hover { color: #687390 } .column-settings__hashtags .column-select__indicator-separator { background-color: #393f4f } .column-settings__hashtags .column-select__menu { background: #fff; border-radius: 4px; margin-top: 10px; color: #9baec8; box-shadow: 2px 4px 15px rgba(0, 0, 0, .4); padding: 0; background: #d9e1e8 } .column-settings__hashtags .column-select__menu h4 { text-transform: uppercase; color: #9baec8; font-size: 13px; font-weight: 500; margin-bottom: 10px } .column-settings__hashtags .column-select__menu li { padding: 4px 0 } .column-settings__hashtags .column-select__menu ul { margin-bottom: 10px } .column-settings__hashtags .column-select__menu em { font-weight: 500; color: #282c37 } .column-settings__hashtags .column-select__menu-list { padding: 6px } .column-settings__hashtags .column-select__option { color: #282c37; border-radius: 4px; font-size: 14px } .column-settings__hashtags .column-select__option--is-focused, .column-settings__hashtags .column-select__option--is-selected { background: #b9c8d5 } .column-settings__row .text-btn:not(.column-header__permission-btn) { margin-bottom: 15px } .relationship-tag { color: #fff; margin-bottom: 4px; display: block; background-color: #000; text-transform: uppercase; font-size: 11px; font-weight: 500; padding: 4px; border-radius: 4px; opacity: .7 } .relationship-tag:hover { opacity: 1 } .setting-toggle { display: block; line-height: 24px } .setting-toggle__label { color: #9baec8; display: inline-block; margin-bottom: 14px; margin-left: 8px; vertical-align: middle } .empty-column-indicator, .error-column, .follow_requests-unlocked_explanation { color: #606984; background: #282c37; text-align: center; padding: 20px; font-size: 15px; font-weight: 400; cursor: default; display: flex; flex: 1 1 auto; align-items: center; justify-content: center } @supports(display:grid) { .empty-column-indicator, .error-column, .follow_requests-unlocked_explanation { contain: strict } } .empty-column-indicator>span, .error-column>span, .follow_requests-unlocked_explanation>span { max-width: 400px } .empty-column-indicator a, .error-column a, .follow_requests-unlocked_explanation a { color: #2b90d9; text-decoration: none } .empty-column-indicator a:hover, .error-column a:hover, .follow_requests-unlocked_explanation a:hover { text-decoration: underline } .follow_requests-unlocked_explanation { background: #1f232b; contain: none } .error-column { flex-direction: column } @-webkit-keyframes heartbeat { 0% { transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 10% { transform: scale(.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 17% { transform: scale(.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 33% { transform: scale(.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 45% { transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } } @keyframes heartbeat { 0% { transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 10% { transform: scale(.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 17% { transform: scale(.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 33% { transform: scale(.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 45% { transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } } .no-reduce-motion .pulse-loading { transform-origin: center center; -webkit-animation: heartbeat 1.5s ease-in-out infinite both; animation: heartbeat 1.5s ease-in-out infinite both } @-webkit-keyframes shake-bottom { 0%, to { transform: rotate(0deg); transform-origin: 50% 100% } 10% { transform: rotate(2deg) } 20%, 40%, 60% { transform: rotate(-4deg) } 30%, 50%, 70% { transform: rotate(4deg) } 80% { transform: rotate(-2deg) } 90% { transform: rotate(2deg) } } @keyframes shake-bottom { 0%, to { transform: rotate(0deg); transform-origin: 50% 100% } 10% { transform: rotate(2deg) } 20%, 40%, 60% { transform: rotate(-4deg) } 30%, 50%, 70% { transform: rotate(4deg) } 80% { transform: rotate(-2deg) } 90% { transform: rotate(2deg) } } .no-reduce-motion .shake-bottom { transform-origin: 50% 100%; -webkit-animation: shake-bottom .8s cubic-bezier(.455, .03, .515, .955) 2s 2 both; animation: shake-bottom .8s cubic-bezier(.455, .03, .515, .955) 2s 2 both } .emoji-picker-dropdown__menu { background: #fff; position: absolute; box-shadow: 4px 4px 6px rgba(0, 0, 0, .4); border-radius: 4px; margin-top: 5px; z-index: 2 } .emoji-picker-dropdown__menu .emoji-mart-scroll { transition: opacity .2s ease } .emoji-picker-dropdown__menu.selecting .emoji-mart-scroll { opacity: .5 } .emoji-picker-dropdown__modifiers { position: absolute; top: 60px; right: 11px; cursor: pointer } .emoji-picker-dropdown__modifiers__menu { position: absolute; z-index: 4; top: -4px; left: -8px; background: #fff; border-radius: 4px; box-shadow: 1px 2px 6px rgba(0, 0, 0, .2); overflow: hidden } .emoji-picker-dropdown__modifiers__menu button { display: block; cursor: pointer; border: 0; padding: 4px 8px; background: transparent } .emoji-picker-dropdown__modifiers__menu button:active, .emoji-picker-dropdown__modifiers__menu button:focus, .emoji-picker-dropdown__modifiers__menu button:hover { background: rgba(217, 225, 232, .4) } .emoji-picker-dropdown__modifiers__menu .emoji-mart-emoji { height: 22px } .emoji-mart-emoji span { background-repeat: no-repeat } .upload-area { align-items: center; background: rgba(0, 0, 0, .8); display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 100%; z-index: 2000 } .upload-area * { pointer-events: none } .upload-area__drop { width: 320px; height: 160px; display: flex; box-sizing: border-box; position: relative; padding: 8px } .upload-area__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: 4px; background: #282c37; box-shadow: 0 0 5px rgba(0, 0, 0, .2) } .upload-area__content { flex: 1; display: flex; align-items: center; justify-content: center; color: #d9e1e8; font-size: 18px; font-weight: 500; border: 2px dashed #606984; border-radius: 4px } .upload-progress { padding: 10px; color: #606984; overflow: hidden; display: flex } .upload-progress .fa { font-size: 34px; margin-right: 10px } .upload-progress span { font-size: 12px; text-transform: uppercase; font-weight: 500; display: block } .upload-progess__message { flex: 1 1 auto } .upload-progress__backdrop { width: 100%; height: 6px; border-radius: 6px; background: #606984; position: relative; margin-top: 5px } .upload-progress__tracker { position: absolute; left: 0; top: 0; height: 6px; background: #2b90d9; border-radius: 6px } .emoji-button { display: block; padding: 5px 5px 2px 2px; outline: 0; cursor: pointer } .emoji-button:active, .emoji-button:focus { outline: 0!important } .emoji-button img { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .8; display: block; margin: 0; width: 22px; height: 22px } .dropdown--active .emoji-button img, .emoji-button:active img, .emoji-button:focus img, .emoji-button:hover img { opacity: 1; -webkit-filter: none; filter: none } .privacy-dropdown__dropdown { position: absolute; background: #fff; box-shadow: 2px 4px 15px rgba(0, 0, 0, .4); border-radius: 4px; margin-left: 40px; overflow: hidden } .privacy-dropdown__dropdown.top { transform-origin: 50% 100% } .privacy-dropdown__dropdown.bottom { transform-origin: 50% 0 } .privacy-dropdown__option { color: #282c37; padding: 10px; cursor: pointer; display: flex } .privacy-dropdown__option.active, .privacy-dropdown__option:hover { background: #2b90d9; color: #fff; outline: 0 } .privacy-dropdown__option.active .privacy-dropdown__option__content, .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .privacy-dropdown__option:hover .privacy-dropdown__option__content, .privacy-dropdown__option:hover .privacy-dropdown__option__content strong { color: #fff } .privacy-dropdown__option.active:hover { background: #3c99dc } .privacy-dropdown__option__icon { display: flex; align-items: center; justify-content: center; margin-right: 10px } .privacy-dropdown__option__content { flex: 1 1 auto; color: #606984 } .privacy-dropdown__option__content strong { font-weight: 500; display: block; color: #282c37 } .privacy-dropdown__option__content strong:lang(ja), .privacy-dropdown__option__content strong:lang(ko), .privacy-dropdown__option__content strong:lang(zh-CN), .privacy-dropdown__option__content strong:lang(zh-HK), .privacy-dropdown__option__content strong:lang(zh-TW) { font-weight: 700 } .privacy-dropdown.active .privacy-dropdown__value { background: #fff; border-radius: 4px 4px 0 0; box-shadow: 0 -4px 4px rgba(0, 0, 0, .1) } .privacy-dropdown.active .privacy-dropdown__value .icon-button { transition: none } .privacy-dropdown.active .privacy-dropdown__value.active { background: #2b90d9 } .privacy-dropdown.active .privacy-dropdown__value.active .icon-button { color: #fff } .privacy-dropdown.active.top .privacy-dropdown__value { border-radius: 0 0 4px 4px } .privacy-dropdown.active .privacy-dropdown__dropdown { display: block; box-shadow: 2px 4px 6px rgba(0, 0, 0, .1) } .search { position: relative } .search__input { outline: 0; box-sizing: border-box; width: 100%; border: 0; box-shadow: none; font-family: inherit; background: #282c37; color: #9baec8; font-size: 14px; margin: 0; display: block; padding: 15px 30px 15px 15px; line-height: 18px; font-size: 16px } .search__input::-webkit-input-placeholder { color: #a8b9cf } .search__input::-moz-placeholder { color: #a8b9cf } .search__input:-ms-input-placeholder { color: #a8b9cf } .search__input::placeholder { color: #a8b9cf } .search__input::-moz-focus-inner { border: 0 } .search__input::-moz-focus-inner, .search__input:active, .search__input:focus { outline: 0!important } .search__input:focus { background: #313543 } @media screen and (max-width:600px) { .search__input { font-size: 16px } } .search__icon::-moz-focus-inner { border: 0 } .search__icon::-moz-focus-inner, .search__icon:focus { outline: 0!important } .search__icon .fa { position: absolute; top: 16px; right: 10px; z-index: 2; display: inline-block; opacity: 0; transition: all .1s linear; transition-property: transform, opacity; font-size: 18px; width: 18px; height: 18px; color: #d9e1e8; cursor: default; pointer-events: none } .search__icon .fa.active { pointer-events: auto; opacity: .3 } .search__icon .fa-search { transform: rotate(90deg) } .search__icon .fa-search.active { pointer-events: none; transform: rotate(0deg) } .search__icon .fa-times-circle { top: 17px; transform: rotate(0deg); color: #606984; cursor: pointer } .search__icon .fa-times-circle.active { transform: rotate(90deg) } .search__icon .fa-times-circle:hover { color: #707b97 } .search-results__header { color: #606984; background: #2c313d; padding: 15px; font-weight: 500; font-size: 16px; cursor: default } .search-results__header .fa { display: inline-block; margin-right: 5px } .search-results__section { margin-bottom: 5px } .search-results__section h5 { background: #1f232b; border-bottom: 1px solid #393f4f; cursor: default; display: flex; padding: 15px; font-weight: 500; font-size: 16px; color: #606984 } .search-results__section h5 .fa { display: inline-block; margin-right: 5px } .search-results__section .account:last-child, .search-results__section>div:last-child .status { border-bottom: 0 } .search-results__hashtag { display: block; padding: 10px; color: #d9e1e8; text-decoration: none } .search-results__hashtag:active, .search-results__hashtag:focus, .search-results__hashtag:hover { color: #e6ebf0; text-decoration: underline } .search-results__info { padding: 20px; color: #9baec8; text-align: center } .modal-root { position: relative; z-index: 9999 } .modal-root__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .7) } .modal-root__container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; align-content: space-around; z-index: 9999; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .modal-root__modal { pointer-events: auto; display: flex; z-index: 9999 } .video-modal__container { max-width: 100vw; max-height: 100vh } .audio-modal__container { width: 50vw } .media-modal { width: 100%; height: 100%; position: relative } .media-modal__close, .media-modal__zoom-button { color: hsla(0, 0%, 100%, .7) } .media-modal__close:active, .media-modal__close:focus, .media-modal__close:hover, .media-modal__zoom-button:active, .media-modal__zoom-button:focus, .media-modal__zoom-button:hover { color: #fff; background-color: hsla(0, 0%, 100%, .15) } .media-modal__close:focus, .media-modal__zoom-button:focus { background-color: hsla(0, 0%, 100%, .3) } .media-modal__closer, .media-modal__navigation { position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .media-modal__navigation { pointer-events: none; transition: opacity .3s linear; will-change: opacity } .media-modal__navigation * { pointer-events: auto } .media-modal__navigation.media-modal__navigation--hidden { opacity: 0 } .media-modal__navigation.media-modal__navigation--hidden * { pointer-events: none } .media-modal__nav { background: transparent; box-sizing: border-box; border: 0; color: hsla(0, 0%, 100%, .7); cursor: pointer; display: flex; align-items: center; font-size: 24px; height: 20vmax; margin: auto 0; padding: 30px 15px; position: absolute; top: 0; bottom: 0 } .media-modal__nav:active, .media-modal__nav:focus, .media-modal__nav:hover { color: #fff } .media-modal__nav--left { left: 0 } .media-modal__nav--right { right: 0 } .media-modal__overlay { max-width: 600px; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto } .media-modal__overlay .picture-in-picture__footer { border-radius: 0; background: transparent; padding: 20px 0 } .media-modal__overlay .picture-in-picture__footer .icon-button { color: #fff } .media-modal__overlay .picture-in-picture__footer .icon-button:active, .media-modal__overlay .picture-in-picture__footer .icon-button:focus, .media-modal__overlay .picture-in-picture__footer .icon-button:hover { color: #fff; background-color: hsla(0, 0%, 100%, .15) } .media-modal__overlay .picture-in-picture__footer .icon-button:focus { background-color: hsla(0, 0%, 100%, .3) } .media-modal__overlay .picture-in-picture__footer .icon-button.active { color: #2b90d9 } .media-modal__overlay .picture-in-picture__footer .icon-button.active:active, .media-modal__overlay .picture-in-picture__footer .icon-button.active:focus, .media-modal__overlay .picture-in-picture__footer .icon-button.active:hover { background: rgba(43, 144, 217, .15) } .media-modal__overlay .picture-in-picture__footer .icon-button.active:focus { background: rgba(43, 144, 217, .3) } .media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active { color: #ca8f04 } .media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active:active, .media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active:focus, .media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active:hover { background: rgba(202, 143, 4, .15) } .media-modal__overlay .picture-in-picture__footer .icon-button.star-icon.active:focus { background: rgba(202, 143, 4, .3) } .media-modal__pagination { display: flex; justify-content: center; margin-bottom: 20px } .media-modal__page-dot { flex: 0 0 auto; background-color: #fff; opacity: .4; height: 6px; width: 6px; border-radius: 50%; margin: 0 4px; padding: 0; border: 0; font-size: 0; transition: opacity .2s ease-in-out } .media-modal__page-dot.active { opacity: 1 } .media-modal__close { position: absolute; right: 8px; top: 8px; z-index: 100 } .media-modal__zoom-button { position: absolute; right: 64px; top: 8px; z-index: 100; pointer-events: auto; transition: opacity .3s linear; will-change: opacity } .media-modal__zoom-button--hidden { pointer-events: none; opacity: 0 } .embed-modal, .error-modal, .onboarding-modal { background: #d9e1e8; color: #282c37; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column } .error-modal__body { height: 80vh; width: 80vw; max-width: 520px; max-height: 420px; position: relative } .error-modal__body>div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 25px; display: none; display: flex; opacity: 0; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text } .error-modal__body, .error-modal__body>div { flex-direction: column; align-items: center; justify-content: center } .error-modal__body { display: flex; text-align: center } .error-modal__footer, .onboarding-modal__paginator { flex: 0 0 auto; background: #c0cdd9; display: flex; padding: 25px } .error-modal__footer>div, .onboarding-modal__paginator>div { min-width: 33px } .error-modal__footer .error-modal__nav, .error-modal__footer .onboarding-modal__nav, .onboarding-modal__paginator .error-modal__nav, .onboarding-modal__paginator .onboarding-modal__nav { color: #606984; border: 0; font-size: 14px; font-weight: 500; padding: 10px 25px; line-height: inherit; height: auto; margin: -10px; border-radius: 4px; background-color: transparent } .error-modal__footer .error-modal__nav:active, .error-modal__footer .error-modal__nav:focus, .error-modal__footer .error-modal__nav:hover, .error-modal__footer .onboarding-modal__nav:active, .error-modal__footer .onboarding-modal__nav:focus, .error-modal__footer .onboarding-modal__nav:hover, .onboarding-modal__paginator .error-modal__nav:active, .onboarding-modal__paginator .error-modal__nav:focus, .onboarding-modal__paginator .error-modal__nav:hover, .onboarding-modal__paginator .onboarding-modal__nav:active, .onboarding-modal__paginator .onboarding-modal__nav:focus, .onboarding-modal__paginator .onboarding-modal__nav:hover { color: #576078; background-color: #a6b9c9 } .error-modal__footer .error-modal__nav.onboarding-modal__done, .error-modal__footer .error-modal__nav.onboarding-modal__next, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next { color: #282c37 } .error-modal__footer .error-modal__nav.onboarding-modal__done:active, .error-modal__footer .error-modal__nav.onboarding-modal__done:focus, .error-modal__footer .error-modal__nav.onboarding-modal__done:hover, .error-modal__footer .error-modal__nav.onboarding-modal__next:active, .error-modal__footer .error-modal__nav.onboarding-modal__next:focus, .error-modal__footer .error-modal__nav.onboarding-modal__next:hover, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:active, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:focus, .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:hover, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:active, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:focus, .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:hover, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:active, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:focus, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:hover, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:active, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:focus, .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:hover, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:active, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:focus, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:hover, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:active, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:focus, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:hover { color: #313543 } .error-modal__footer { justify-content: center } .display-case { text-align: center; font-size: 15px; margin-bottom: 15px } .display-case__label { font-weight: 500; color: #282c37; margin-bottom: 5px; text-transform: uppercase; font-size: 12px } .display-case__case { background: #282c37; color: #d9e1e8; font-weight: 500; padding: 10px; border-radius: 4px } .onboard-sliders { display: inline-block; max-width: 30px; max-height: auto; margin-left: 10px } .actions-modal, .block-modal, .boost-modal, .confirmation-modal, .mute-modal, .report-modal { background: #f2f5f7; color: #282c37; border-radius: 8px; overflow: hidden; max-width: 90vw; width: 480px; position: relative; flex-direction: column } .actions-modal .status__display-name, .block-modal .status__display-name, .boost-modal .status__display-name, .confirmation-modal .status__display-name, .mute-modal .status__display-name, .report-modal .status__display-name { display: block; max-width: 100%; padding-right: 25px } .actions-modal .status__avatar, .block-modal .status__avatar, .boost-modal .status__avatar, .confirmation-modal .status__avatar, .mute-modal .status__avatar, .report-modal .status__avatar { height: 28px; left: 10px; position: absolute; top: 10px; width: 48px } .actions-modal .status__content__spoiler-link, .block-modal .status__content__spoiler-link, .boost-modal .status__content__spoiler-link, .confirmation-modal .status__content__spoiler-link, .mute-modal .status__content__spoiler-link, .report-modal .status__content__spoiler-link { color: #f2f5f7 } .actions-modal .status { background: #fff; padding-top: 10px; padding-bottom: 10px } .actions-modal .dropdown-menu__separator, .actions-modal .status { border-bottom-color: #d9e1e8 } .boost-modal__container { overflow-x: scroll; padding: 10px } .boost-modal__container .status { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; border-bottom: 0 } .block-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar { display: flex; justify-content: space-between; background: #d9e1e8; padding: 10px; line-height: 36px } .block-modal__action-bar>div, .boost-modal__action-bar>div, .confirmation-modal__action-bar>div, .mute-modal__action-bar>div { flex: 1 1 auto; text-align: right; color: #606984; padding-right: 10px } .block-modal__action-bar .button, .boost-modal__action-bar .button, .confirmation-modal__action-bar .button, .mute-modal__action-bar .button { flex: 0 0 auto } .boost-modal__status-header { font-size: 15px } .boost-modal__status-time { float: right; font-size: 14px } .block-modal, .mute-modal { line-height: 24px } .block-modal .react-toggle, .mute-modal .react-toggle { vertical-align: middle } .report-modal { width: 90vw; max-width: 700px } .report-modal__container { display: flex; border-top: 1px solid #d9e1e8 } @media screen and (max-width:480px) { .report-modal__container { flex-wrap: wrap; overflow-y: auto } } .report-modal__comment, .report-modal__statuses { box-sizing: border-box; width: 50% } @media screen and (max-width:480px) { .report-modal__comment, .report-modal__statuses { width: 100% } } .focal-point-modal__content, .report-modal__statuses { flex: 1 1 auto; min-height: 20vh; max-height: 80vh; overflow-y: auto; overflow-x: hidden } .focal-point-modal__content .status__content a, .report-modal__statuses .status__content a { color: #2b90d9 } .focal-point-modal__content .status__content, .focal-point-modal__content .status__content p, .report-modal__statuses .status__content, .report-modal__statuses .status__content p { color: #282c37 } @media screen and (max-width:480px) { .focal-point-modal__content, .report-modal__statuses { max-height: 10vh } } @media screen and (max-width:480px) { .focal-point-modal__content { max-height: 40vh } } .setting-divider { background: transparent; border: 0; width: 100%; height: 1px; margin: 0 0 29px } .report-modal__comment { padding: 20px; border-right: 1px solid #d9e1e8; max-width: 320px } .report-modal__comment p { font-size: 14px; line-height: 20px; margin-bottom: 20px } .report-modal__comment .setting-text { display: block; box-sizing: border-box; width: 100%; color: #282c37; background: #fff; padding: 10px; font-family: inherit; font-size: 14px; resize: none; outline: 0; border-radius: 4px; border: 1px solid #d9e1e8; min-height: 100px; max-height: 50vh; margin: 0 0 10px } .report-modal__comment .setting-text:focus { border: 1px solid #c0cdd9 } .report-modal__comment .setting-text__wrapper { background: #fff; border: 1px solid #d9e1e8; margin-bottom: 10px; border-radius: 4px } .report-modal__comment .setting-text__wrapper .setting-text { border: 0; margin-bottom: 0; border-radius: 0 } .report-modal__comment .setting-text__wrapper .setting-text:focus { border: 0 } .report-modal__comment .setting-text__wrapper__modifiers { color: #282c37; font-family: inherit; font-size: 14px; background: #fff } .report-modal__comment .setting-text__toolbar { display: flex; justify-content: space-between; margin-bottom: 20px } .report-modal__comment .setting-text-label { display: block; color: #282c37; font-size: 14px; font-weight: 500; margin-bottom: 10px } .report-modal__comment .setting-toggle { margin-top: 20px; margin-bottom: 24px } .report-modal__comment .setting-toggle__label { color: #282c37; font-size: 14px } @media screen and (max-width:480px) { .report-modal__comment { padding: 10px; max-width: 100%; order: 2 } .report-modal__comment .setting-toggle { margin-bottom: 4px } } .actions-modal { max-height: 80vh; max-width: 80vw } .actions-modal .status { overflow-y: auto; max-height: 300px } .actions-modal .actions-modal__item-label { font-weight: 500 } .actions-modal ul { overflow-y: auto; flex-shrink: 0; max-height: 80vh } .actions-modal ul.with-status { max-height: calc(80vh - 75px) } .actions-modal ul li:empty { margin: 0 } .actions-modal ul li:not(:empty) a { color: #282c37; display: flex; padding: 12px 16px; font-size: 15px; align-items: center; text-decoration: none } .actions-modal ul li:not(:empty) a, .actions-modal ul li:not(:empty) a button { transition: none } .actions-modal ul li:not(:empty) a.active, .actions-modal ul li:not(:empty) a.active button, .actions-modal ul li:not(:empty) a:active, .actions-modal ul li:not(:empty) a:active button, .actions-modal ul li:not(:empty) a:focus, .actions-modal ul li:not(:empty) a:focus button, .actions-modal ul li:not(:empty) a:hover, .actions-modal ul li:not(:empty) a:hover button { background: #2b90d9; color: #fff } .actions-modal ul li:not(:empty) a button:first-child { margin-right: 10px } .block-modal__action-bar .confirmation-modal__secondary-button, .confirmation-modal__action-bar .confirmation-modal__secondary-button, .mute-modal__action-bar .confirmation-modal__secondary-button { flex-shrink: 1 } .block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button { background-color: transparent; color: #606984; font-size: 14px; font-weight: 500 } .block-modal__cancel-button:active, .block-modal__cancel-button:focus, .block-modal__cancel-button:hover, .confirmation-modal__cancel-button:active, .confirmation-modal__cancel-button:focus, .confirmation-modal__cancel-button:hover, .confirmation-modal__secondary-button:active, .confirmation-modal__secondary-button:focus, .confirmation-modal__secondary-button:hover, .mute-modal__cancel-button:active, .mute-modal__cancel-button:focus, .mute-modal__cancel-button:hover { color: #576078; background-color: transparent } .block-modal__container, .confirmation-modal__container, .mute-modal__container, .report-modal__target { padding: 30px; font-size: 16px } .block-modal__container strong, .confirmation-modal__container strong, .mute-modal__container strong, .report-modal__target strong { font-weight: 500 } .block-modal__container strong:lang(ja), .block-modal__container strong:lang(ko), .block-modal__container strong:lang(zh-CN), .block-modal__container strong:lang(zh-HK), .block-modal__container strong:lang(zh-TW), .confirmation-modal__container strong:lang(ja), .confirmation-modal__container strong:lang(ko), .confirmation-modal__container strong:lang(zh-CN), .confirmation-modal__container strong:lang(zh-HK), .confirmation-modal__container strong:lang(zh-TW), .mute-modal__container strong:lang(ja), .mute-modal__container strong:lang(ko), .mute-modal__container strong:lang(zh-CN), .mute-modal__container strong:lang(zh-HK), .mute-modal__container strong:lang(zh-TW), .report-modal__target strong:lang(ja), .report-modal__target strong:lang(ko), .report-modal__target strong:lang(zh-CN), .report-modal__target strong:lang(zh-HK), .report-modal__target strong:lang(zh-TW) { font-weight: 700 } .block-modal__container select, .confirmation-modal__container select, .mute-modal__container select, .report-modal__target select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; font-size: 14px; color: #282c37; display: inline-block; width: auto; outline: 0; font-family: inherit; background: #fff url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px; border: 1px solid #dbdbdb; border-radius: 4px; padding: 6px 30px 6px 10px } .confirmation-modal__container, .report-modal__target { text-align: center } .block-modal__explanation, .mute-modal__explanation { margin-top: 20px } .block-modal .setting-toggle, .mute-modal .setting-toggle { margin-top: 20px; margin-bottom: 24px; display: flex; align-items: center } .block-modal .setting-toggle__label, .mute-modal .setting-toggle__label { color: #282c37; margin: 0 0 0 8px } .report-modal__target { padding: 15px } .report-modal__target .media-modal__close { top: 14px; right: 15px } .loading-bar { background-color: #2b90d9; height: 3px; position: absolute; top: 0; left: 0; z-index: 9999 } .media-gallery__gifv__label { display: block; position: absolute; color: #fff; background: rgba(0, 0, 0, .5); bottom: 6px; left: 6px; padding: 2px 6px; border-radius: 2px; font-size: 11px; font-weight: 600; z-index: 1; pointer-events: none; opacity: .9; transition: opacity .1s ease; line-height: 18px } .media-gallery__gifv:hover .media-gallery__gifv__label { opacity: 1 } .attachment-list { display: flex; font-size: 14px; border: 1px solid #393f4f; border-radius: 4px; margin-top: 14px; overflow: hidden } .attachment-list__icon { flex: 0 0 auto; color: #606984; padding: 8px 18px; cursor: default; border-right: 1px solid #393f4f; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26px } .attachment-list__icon .fa { display: block } .attachment-list__list { list-style: none; padding: 4px 0 4px 8px; display: flex; flex-direction: column; justify-content: center } .attachment-list__list li { display: block; padding: 4px 0 } .attachment-list__list a { text-decoration: none; color: #606984; font-weight: 500 } .attachment-list__list a:hover { text-decoration: underline } .attachment-list.compact { border: 0; margin-top: 4px } .attachment-list.compact .attachment-list__list { padding: 0; display: block } .attachment-list.compact .fa { color: #606984 } .media-gallery { margin-top: 8px; border-radius: 4px; width: 100%; min-height: 64px } .media-gallery, .media-gallery__item { box-sizing: border-box; overflow: hidden; position: relative } .media-gallery__item { border: 0; display: block; float: left; border-radius: 4px } .media-gallery__item.standalone .media-gallery__item-gifv-thumbnail { transform: none; top: 0 } .media-gallery__item-thumbnail { cursor: zoom-in; display: block; text-decoration: none; color: #d9e1e8; position: relative; z-index: 1 } .media-gallery__item-thumbnail, .media-gallery__item-thumbnail img { height: 100%; width: 100% } .media-gallery__item-thumbnail img, .media-gallery__preview { -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover } .media-gallery__preview { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: #000 } .media-gallery__preview--hidden { display: none } .media-gallery__gifv { height: 100%; overflow: hidden; position: relative; width: 100% } .media-gallery__item-gifv-thumbnail { cursor: zoom-in; height: 100%; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; position: relative; top: 50%; transform: translateY(-50%); width: 100%; z-index: 1 } .media-gallery__item-thumbnail-label { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); overflow: hidden; position: absolute } .detailed .video-player__volume:before, .detailed .video-player__volume__current, .fullscreen .video-player__volume:before, .fullscreen .video-player__volume__current { bottom: 27px } .detailed .video-player__volume__handle, .fullscreen .video-player__volume__handle { bottom: 23px } .audio-player { overflow: hidden; box-sizing: border-box; position: relative; background: #17191f; border-radius: 4px; padding-bottom: 44px; direction: ltr } .audio-player.editable { border-radius: 0; height: 100% } .audio-player .video-player__seek:before, .audio-player .video-player__volume:before { background: currentColor; opacity: .15 } .audio-player .video-player__seek__buffer { background: currentColor; opacity: .2 } .audio-player .video-player__buttons button { color: currentColor; opacity: .75 } .audio-player .video-player__buttons button:active, .audio-player .video-player__buttons button:focus, .audio-player .video-player__buttons button:hover { color: currentColor; opacity: 1 } .audio-player .video-player__time-current, .audio-player .video-player__time-sep, .audio-player .video-player__time-total { color: currentColor } .audio-player .video-player__seek:before, .audio-player .video-player__seek__buffer, .audio-player .video-player__seek__progress { top: 0 } .audio-player .video-player__seek__handle { top: -4px } .audio-player .video-player__controls { padding-top: 10px; background: transparent } .video-player { overflow: hidden; position: relative; background: #000; max-width: 100%; border-radius: 4px; box-sizing: border-box; direction: ltr; color: #fff } .video-player.editable { border-radius: 0; height: 100%!important } .video-player:focus { outline: 0 } .video-player video { display: block; max-width: 100vw; max-height: 80vh; z-index: 1 } .video-player.fullscreen { width: 100%!important; height: 100%!important; margin: 0 } .video-player.fullscreen video { max-width: 100%!important; max-height: 100%!important; width: 100%!important; height: 100%!important; outline: 0 } .video-player.inline video { -o-object-fit: contain; font-family: "object-fit:contain"; object-fit: contain; position: relative; top: 50%; transform: translateY(-50%) } .video-player__controls { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; box-sizing: border-box; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 60%, transparent); padding: 0 15px; opacity: 0; transition: opacity .1s ease } .video-player__controls.active { opacity: 1 } .video-player.inactive .video-player__controls, .video-player.inactive video { visibility: hidden } .video-player__spoiler { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; border: 0; background: #000; color: #9baec8; transition: none; pointer-events: none } .video-player__spoiler.active { display: block; pointer-events: auto } .video-player__spoiler.active:active, .video-player__spoiler.active:focus, .video-player__spoiler.active:hover { color: #b2c1d5 } .video-player__spoiler__title { display: block; font-size: 14px } .video-player__spoiler__subtitle { display: block; font-size: 11px; font-weight: 500 } .video-player__buttons-bar { display: flex; justify-content: space-between; padding-bottom: 8px; margin: 0 -5px } .video-player__buttons-bar .video-player__download__icon { color: inherit } .video-player__buttons { display: flex; flex: 0 1 auto; min-width: 30px; align-items: center; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .video-player__buttons .player-button { display: inline-block; outline: 0; flex: 0 0 auto; background: transparent; padding: 5px; font-size: 16px; border: 0; color: hsla(0, 0%, 100%, .75) } .video-player__buttons .player-button:active, .video-player__buttons .player-button:focus, .video-player__buttons .player-button:hover { color: #fff } .video-player__time { display: inline; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; margin: 0 5px } .video-player__time-current, .video-player__time-sep, .video-player__time-total { font-size: 14px; font-weight: 500 } .video-player__time-current { color: #fff } .video-player__time-sep { display: inline-block; margin: 0 6px } .video-player__time-sep, .video-player__time-total { color: #fff } .video-player__volume { flex: 0 0 auto; display: inline-flex; cursor: pointer; height: 24px; position: relative; overflow: hidden } .no-reduce-motion .video-player__volume { transition: all .1s linear } .video-player__volume.active { overflow: visible; width: 50px; margin-right: 16px } .video-player__volume:before { content: ""; width: 50px; background: hsla(0, 0%, 100%, .35) } .video-player__volume:before, .video-player__volume__current { border-radius: 4px; display: block; position: absolute; height: 4px; left: 0; top: 50%; transform: translateY(-50%) } .video-player__volume__current { background: #4ea2df } .video-player__volume__handle { position: absolute; z-index: 3; border-radius: 50%; width: 12px; height: 12px; top: 50%; left: 0; margin-left: -6px; transform: translateY(-50%); background: #4ea2df; box-shadow: 1px 2px 6px rgba(0, 0, 0, .2); opacity: 0 } .no-reduce-motion .video-player__volume__handle { transition: opacity .1s linear } .video-player__volume.active .video-player__volume__handle { opacity: 1 } .video-player__link { padding: 2px 10px } .video-player__link a { text-decoration: none; font-size: 14px; font-weight: 500; color: #fff } .video-player__link a:active, .video-player__link a:focus, .video-player__link a:hover { text-decoration: underline } .video-player__seek { cursor: pointer; height: 24px; position: relative } .video-player__seek:before { content: ""; width: 100%; background: hsla(0, 0%, 100%, .35); border-radius: 4px; display: block; position: absolute; height: 4px; top: 14px } .video-player__seek__buffer, .video-player__seek__progress { display: block; position: absolute; height: 4px; border-radius: 4px; top: 14px; background: #4ea2df } .video-player__seek__buffer { background: hsla(0, 0%, 100%, .2) } .video-player__seek__handle { position: absolute; z-index: 3; opacity: 0; border-radius: 50%; width: 12px; height: 12px; top: 10px; margin-left: -6px; background: #4ea2df; box-shadow: 1px 2px 6px rgba(0, 0, 0, .2) } .no-reduce-motion .video-player__seek__handle { transition: opacity .1s ease } .video-player__seek:hover .video-player__seek__handle, .video-player__seek__handle.active { opacity: 1 } .video-player.detailed .video-player__buttons .player-button, .video-player.fullscreen .video-player__buttons .player-button { padding-top: 10px; padding-bottom: 10px } .gifv video { max-width: 100vw; max-height: 80vh } .directory__list { width: 100%; margin: 10px 0; transition: opacity .1s ease-in } .directory__list.loading { opacity: .7 } @media screen and (max-width:415px) { .directory__list { margin: 0 } } .directory__card { box-sizing: border-box; margin-bottom: 10px } .directory__card__img { height: 125px; position: relative; background: #0e1014; overflow: hidden } .directory__card__img img { display: block; width: 100%; height: 100%; margin: 0; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover } .directory__card__bar { display: flex; align-items: center; background: #313543; padding: 10px } .directory__card__bar__name { flex: 1 1 auto; display: flex; align-items: center; text-decoration: none; overflow: hidden } .directory__card__bar__relationship { width: 23px; min-height: 1px; flex: 0 0 auto } .directory__card__bar .avatar { flex: 0 0 auto; width: 48px; height: 48px; padding-top: 2px } .directory__card__bar .avatar img { width: 100%; height: 100%; display: block; margin: 0; border-radius: 4px; background: #17191f; -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover } .directory__card__bar .display-name { margin-left: 15px; text-align: left } .directory__card__bar .display-name strong { font-size: 15px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis } .directory__card__bar .display-name span { display: block; font-size: 14px; color: #9baec8; font-weight: 400; overflow: hidden; text-overflow: ellipsis } .directory__card__extra { background: #282c37; display: flex; align-items: center; justify-content: center } .directory__card__extra .accounts-table__count { width: 33.33%; flex: 0 0 auto; padding: 15px 0 } .directory__card__extra .account__header__content { box-sizing: border-box; padding: 15px 10px; border-bottom: 1px solid #393f4f; width: 100%; min-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .directory__card__extra .account__header__content p { display: none } .directory__card__extra .account__header__content p:first-child { display: inline } .directory__card__extra .account__header__content br { display: none } .account-gallery__container { display: flex; flex-wrap: wrap; padding: 4px 2px } .account-gallery__item { border: 0; box-sizing: border-box; display: block; position: relative; border-radius: 4px; overflow: hidden; margin: 2px } .account-gallery__item__icons { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px } .account__section-headline, .notification__filter-bar { background: #1f232b; border-bottom: 1px solid #393f4f; cursor: default; display: flex; flex-shrink: 0 } .account__section-headline button, .notification__filter-bar button { background: #1f232b; border: 0; margin: 0 } .account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button { display: block; flex: 1 1 auto; color: #9baec8; padding: 15px 0; font-size: 14px; font-weight: 500; text-align: center; text-decoration: none; position: relative; width: 100%; white-space: nowrap } .account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active { color: #d9e1e8 } .account__section-headline a.active:after, .account__section-headline a.active:before, .account__section-headline button.active:after, .account__section-headline button.active:before, .notification__filter-bar a.active:after, .notification__filter-bar a.active:before, .notification__filter-bar button.active:after, .notification__filter-bar button.active:before { display: block; content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-color: transparent transparent #393f4f; border-style: solid; border-width: 0 10px 10px } .account__section-headline a.active:after, .account__section-headline button.active:after, .notification__filter-bar a.active:after, .notification__filter-bar button.active:after { bottom: -1px; border-color: transparent transparent #282c37 } .account__section-headline.directory__section-headline, .notification__filter-bar.directory__section-headline { background: #242731; border-bottom-color: transparent } .account__section-headline.directory__section-headline a.active:before, .account__section-headline.directory__section-headline button.active:before, .notification__filter-bar.directory__section-headline a.active:before, .notification__filter-bar.directory__section-headline button.active:before { display: none } .account__section-headline.directory__section-headline a.active:after, .account__section-headline.directory__section-headline button.active:after, .notification__filter-bar.directory__section-headline a.active:after, .notification__filter-bar.directory__section-headline button.active:after { border-color: transparent transparent #191b22 } .filter-form { background: #282c37 } .filter-form__column { padding: 10px 15px } .column-settings__row .radio-button, .filter-form .radio-button { display: block } .radio-button { font-size: 14px; position: relative; display: inline-block; padding: 6px 0; line-height: 18px; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer } .radio-button input[type=checkbox], .radio-button input[type=radio] { display: none } .radio-button__input { display: inline-block; position: relative; border: 1px solid #9baec8; box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 auto; margin-right: 10px; top: -1px; border-radius: 50%; vertical-align: middle } .radio-button__input.checked { border-color: #4ea2df; background: #4ea2df } ::-webkit-scrollbar-thumb { border-radius: 0 } .search-popout { background: #fff; border-radius: 4px; padding: 10px 14px 14px; margin-top: 10px; color: #9baec8; box-shadow: 2px 4px 15px rgba(0, 0, 0, .4) } .search-popout h4 { text-transform: uppercase; color: #9baec8; font-size: 13px; font-weight: 500; margin-bottom: 10px } .search-popout li { padding: 4px 0 } .search-popout ul { margin-bottom: 10px } .search-popout em { font-weight: 500; color: #282c37 } noscript { text-align: center } noscript img { width: 200px; opacity: .5; -webkit-animation: flicker 4s infinite; animation: flicker 4s infinite } noscript div { font-size: 14px; margin: 30px auto; color: #d9e1e8; max-width: 400px } noscript div a { color: #2b90d9; text-decoration: underline } noscript div a:hover { text-decoration: none } @-webkit-keyframes flicker { 0% { opacity: 1 } 30% { opacity: .75 } to { opacity: 1 } } @keyframes flicker { 0% { opacity: 1 } 30% { opacity: .75 } to { opacity: 1 } } @media screen and (max-width:630px)and (max-height:400px) { .search, .tabs-bar { will-change: margin-top; transition: margin-top .4s .1s } .navigation-bar { will-change: padding-bottom; transition: padding-bottom .4s .1s } .navigation-bar>a:first-child { will-change: margin-top, margin-left, margin-right, width; transition: margin-top .4s .1s, margin-left .4s .5s, margin-right .4s .5s } .navigation-bar>.navigation-bar__profile-edit { will-change: margin-top; transition: margin-top .4s .1s } .navigation-bar .navigation-bar__actions>.icon-button.close { will-change: opacity transform; transition: opacity .2s .1s, transform .4s .1s } .navigation-bar .navigation-bar__actions>.compose__action-bar .icon-button { will-change: opacity transform; transition: opacity .2s .3s, transform .4s .1s } .is-composing .search, .is-composing .tabs-bar { margin-top: -50px } .is-composing .navigation-bar { padding-bottom: 0 } .is-composing .navigation-bar>a:first-child { margin: -100px 10px 0 -50px } .is-composing .navigation-bar .navigation-bar__profile { padding-top: 2px } .is-composing .navigation-bar .navigation-bar__profile-edit { position: absolute; margin-top: -60px } .is-composing .navigation-bar .navigation-bar__actions .icon-button.close { pointer-events: auto; opacity: 1; transform: scale(1) translate(0); bottom: 5px } .is-composing .navigation-bar .navigation-bar__actions .compose__action-bar .icon-button { pointer-events: none; opacity: 0; transform: scaleX(0) translate(100%) } } .embed-modal { width: auto; max-width: 80vw; max-height: 80vh } .embed-modal h4 { padding: 30px; font-weight: 500; font-size: 16px; text-align: center } .embed-modal .embed-modal__container { padding: 10px } .embed-modal .embed-modal__container .hint { margin-bottom: 15px } .embed-modal .embed-modal__container .embed-modal__html { outline: 0; box-sizing: border-box; display: block; width: 100%; border: 0; padding: 10px; font-family: "mastodon-font-monospace", monospace; background: #282c37; color: #fff; font-size: 14px; margin: 0 0 15px; border-radius: 4px } .embed-modal .embed-modal__container .embed-modal__html::-moz-focus-inner { border: 0 } .embed-modal .embed-modal__container .embed-modal__html::-moz-focus-inner, .embed-modal .embed-modal__container .embed-modal__html:active, .embed-modal .embed-modal__container .embed-modal__html:focus { outline: 0!important } .embed-modal .embed-modal__container .embed-modal__html:focus { background: #313543 } @media screen and (max-width:600px) { .embed-modal .embed-modal__container .embed-modal__html { font-size: 16px } } .embed-modal .embed-modal__container .embed-modal__iframe { width: 400px; max-width: 100%; overflow: hidden; border: 0; border-radius: 4px } .account__moved-note { padding: 14px 10px 16px; background: #313543; border-top: 1px solid #393f4f; border-bottom: 1px solid #393f4f } .account__moved-note__message { position: relative; margin-left: 58px; color: #606984; padding: 0 0 4px; font-size: 14px } .account__moved-note__message>span { display: block; overflow: hidden; text-overflow: ellipsis } .account__moved-note__icon-wrapper { left: -26px; position: absolute } .account__moved-note .detailed-status__display-avatar { position: relative } .account__moved-note .detailed-status__display-name { margin-bottom: 0 } .column-inline-form { padding: 15px 0 15px 15px; display: flex; justify-content: flex-start; align-items: center; background: #313543 } .column-inline-form label { flex: 1 1 auto } .column-inline-form label input { width: 100% } .column-inline-form label input:focus { outline: 0 } .column-inline-form .icon-button { flex: 0 0 auto; margin: 0 10px } .drawer__backdrop { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5) } .list-editor { background: #282c37; flex-direction: column; border-radius: 8px; box-shadow: 2px 4px 15px rgba(0, 0, 0, .4); width: 380px; overflow: hidden } @media screen and (max-width:420px) { .list-editor { width: 90% } } .list-editor h4 { padding: 15px 0; background: #444b5d; font-weight: 500; font-size: 16px; text-align: center; border-radius: 8px 8px 0 0 } .list-editor .drawer__pager { height: 50vh } .list-editor .drawer__inner { border-radius: 0 0 8px 8px } .list-editor .drawer__inner.backdrop { width: calc(100% - 60px); box-shadow: 2px 4px 15px rgba(0, 0, 0, .4); border-radius: 0 0 0 8px } .list-editor__accounts { overflow-y: auto } .list-editor .account__display-name:hover strong { text-decoration: none } .list-editor .account__avatar { cursor: default } .list-editor .search { margin-bottom: 0 } .list-adder { background: #282c37; flex-direction: column; border-radius: 8px; box-shadow: 2px 4px 15px rgba(0, 0, 0, .4); width: 380px; overflow: hidden } @media screen and (max-width:420px) { .list-adder { width: 90% } } .list-adder__account { background: #444b5d } .list-adder__lists { background: #444b5d; height: 50vh; border-radius: 0 0 8px 8px; overflow-y: auto } .list-adder .list { padding: 10px; border-bottom: 1px solid #393f4f } .list-adder .list__wrapper { display: flex } .list-adder .list__display-name { flex: 1 1 auto; overflow: hidden; text-decoration: none; font-size: 16px; padding: 10px } .focal-point { position: relative; cursor: move; overflow: hidden; height: 100%; display: flex; justify-content: center; align-items: center; background: #000 } .focal-point canvas, .focal-point img, .focal-point video { display: block; max-height: 80vh; width: 100%; height: auto; margin: 0; -o-object-fit: contain; font-family: "object-fit:contain"; object-fit: contain; background: #000 } .focal-point__reticle { position: absolute; width: 100px; height: 100px; transform: translate(-50%, -50%); background: url(/packs/media/images/reticle-598f880539bfa93e3e2cc0fbb63afbf9.png) no-repeat 0 0; border-radius: 50%; box-shadow: 0 0 0 9999em rgba(0, 0, 0, .35) } .focal-point__overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0 } .focal-point__preview { position: absolute; bottom: 10px; right: 10px; z-index: 2; cursor: move; transition: opacity .1s ease } .focal-point__preview:hover { opacity: .5 } .focal-point__preview strong { color: #fff; font-size: 14px; font-weight: 500; display: block; margin-bottom: 5px } .focal-point__preview div { border-radius: 4px; box-shadow: 0 0 14px rgba(0, 0, 0, .2) } @media screen and (max-width:480px) { .focal-point img, .focal-point video { max-height: 100% } .focal-point__preview { display: none } } .account__header__content { color: #9baec8; font-size: 14px; font-weight: 400; overflow: hidden; word-break: normal; word-wrap: break-word } .account__header__content p { margin-bottom: 20px } .account__header__content p:last-child { margin-bottom: 0 } .account__header__content a { color: inherit; text-decoration: underline } .account__header__content a:hover { text-decoration: none } .account__header { overflow: hidden } .account__header.inactive { opacity: .5 } .account__header.inactive .account__avatar, .account__header.inactive .account__header__image { -webkit-filter: grayscale(100%); filter: grayscale(100%) } .account__header__info { position: absolute; top: 10px; left: 10px } .account__header__image { overflow: hidden; height: 145px; position: relative; background: #1f232b } .account__header__image img { -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; display: block; width: 100%; height: 100%; margin: 0 } .account__header__bar { position: relative; background: #313543; padding: 5px; border-bottom: 1px solid #42485a } .account__header__bar .avatar { display: block; flex: 0 0 auto; width: 94px; margin-left: -2px } .account__header__bar .avatar .account__avatar { background: #17191f; border: 2px solid #313543 } .account__header__tabs { display: flex; align-items: flex-start; padding: 7px 10px; margin-top: -55px } .account__header__tabs__buttons { display: flex; align-items: center; padding-top: 55px; overflow: hidden } .account__header__tabs__buttons .icon-button { border: 1px solid #42485a; border-radius: 4px; box-sizing: content-box; padding: 2px } .account__header__tabs__buttons>.icon-button { margin-right: 8px } .account__header__tabs__buttons .button { margin: 0 8px } .account__header__tabs__name { padding: 5px 10px } .account__header__tabs__name .account-role { vertical-align: top } .account__header__tabs__name .emojione { width: 22px; height: 22px } .account__header__tabs__name h1 { font-size: 16px; line-height: 24px; color: #fff; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .account__header__tabs__name h1 small { display: block; font-size: 14px; color: #9baec8; font-weight: 400; overflow: hidden; text-overflow: ellipsis } .account__header__tabs .spacer { flex: 1 1 auto } .account__header__bio { overflow: hidden; margin: 0 -5px } .account__header__bio .account__header__content { padding: 20px 15px 5px; color: #fff } .columns-area--mobile .account__header__bio .account__header__content { padding-left: 20px; padding-right: 20px } .account__header__bio .account__header__fields { margin: 0; border-top: 1px solid #42485a } .account__header__bio .account__header__fields a { color: #4ea2df } .account__header__bio .account__header__fields dl:first-child .verified { border-radius: 0 4px 0 0 } .account__header__bio .account__header__fields .verified a { color: #79bd9a } .account__header__extra { margin-top: 4px } .account__header__extra__links { font-size: 14px; color: #9baec8; padding: 10px 0 } .account__header__extra__links a { display: inline-block; color: #9baec8; text-decoration: none; padding: 5px 10px; font-weight: 500 } .account__header__extra__links a strong { font-weight: 700; color: #fff } .account__header__account-note { padding: 15px 15px 10px; color: #fff; font-size: 14px; font-weight: 400; border-bottom: 1px solid #42485a } .columns-area--mobile .account__header__account-note { padding-left: 20px; padding-right: 20px } .account__header__account-note label { display: block; font-size: 12px; font-weight: 500; color: #9baec8; text-transform: uppercase; margin-bottom: 5px } .account__header__account-note textarea { display: block; box-sizing: border-box; width: calc(100% + 20px); color: #d9e1e8; background: transparent; padding: 10px; margin: 0 -10px; font-family: inherit; font-size: 14px; resize: none; border: 0; outline: 0; border-radius: 4px } .account__header__account-note textarea::-webkit-input-placeholder { color: #606984; opacity: 1 } .account__header__account-note textarea::-moz-placeholder { color: #606984; opacity: 1 } .account__header__account-note textarea:-ms-input-placeholder { color: #606984; opacity: 1 } .account__header__account-note textarea::placeholder { color: #606984; opacity: 1 } .account__header__account-note textarea:focus { background: #282c37 } .trends__header { color: #606984; background: #2c313d; border-bottom: 1px solid #1f232b; font-weight: 500; padding: 15px; font-size: 16px; cursor: default } .trends__header .fa { display: inline-block; margin-right: 5px } .trends__item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #393f4f } .trends__item:last-child { border-bottom: 0 } .trends__item__name { flex: 1 1 auto; color: #606984; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .trends__item__name strong { font-weight: 500 } .trends__item__name a { color: #9baec8; text-decoration: none; font-size: 14px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .trends__item__name a:active span, .trends__item__name a:focus span, .trends__item__name a:hover span { text-decoration: underline } .trends__item__current { flex: 0 0 auto; font-size: 24px; line-height: 36px; font-weight: 500; text-align: right; padding-right: 15px; margin-left: 5px; color: #d9e1e8 } .trends__item__sparkline { flex: 0 0 auto; width: 50px } .trends__item__sparkline path:first-child { fill: rgba(43, 144, 217, .25)!important; fill-opacity: 1!important } .trends__item__sparkline path:last-child { stroke: #459ede!important; fill: none!important } .conversation { display: flex; border-bottom: 1px solid #393f4f; padding: 5px 5px 0 } .conversation:focus { background: #2c313d; outline: 0 } .conversation__avatar { flex: 0 0 auto; padding: 12px 10px 10px; position: relative; cursor: pointer } .conversation__unread { display: inline-block; background: #2b90d9; border-radius: 50%; width: .625rem; height: .625rem; margin: -.1ex .15em .1ex } .conversation__content { flex: 1 1 auto; padding: 10px 15px 10px 5px; overflow: hidden } .conversation__content__info { overflow: hidden; display: flex; flex-direction: row-reverse; justify-content: space-between } .conversation__content__relative-time { font-size: 15px; color: #9baec8; padding-left: 15px } .conversation__content__names { color: #9baec8; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; flex-basis: 90px; flex-grow: 1 } .conversation__content__names a { color: #fff; text-decoration: none } .conversation__content__names a:active, .conversation__content__names a:focus, .conversation__content__names a:hover { text-decoration: underline } .conversation__content a { word-break: break-word } .conversation--unread { background: #2c313d } .conversation--unread:focus { background: #313543 } .conversation--unread .conversation__content__info { font-weight: 700 } .conversation--unread .conversation__content__relative-time { color: #fff } .announcements { background: #393f4f; font-size: 13px; display: flex; align-items: flex-end } .announcements__mastodon { width: 124px; flex: 0 0 auto } @media screen and (max-width:424px) { .announcements__mastodon { display: none } } .announcements__container { width: calc(100% - 124px); flex: 0 0 auto; position: relative } @media screen and (max-width:424px) { .announcements__container { width: 100% } } .announcements__item { box-sizing: border-box; width: 100%; padding: 15px; position: relative; font-size: 15px; line-height: 20px; word-wrap: break-word; font-weight: 400; max-height: 50vh; overflow: hidden; display: flex; flex-direction: column } .announcements__item__range { display: block; font-weight: 500; margin-bottom: 10px; padding-right: 18px } .announcements__item__unread { position: absolute; top: 19px; right: 19px; display: block; background: #2b90d9; border-radius: 50%; width: .625rem; height: .625rem } .announcements__pagination { padding: 15px; color: #9baec8; position: absolute; bottom: 3px; right: 0 } .layout-multiple-columns .announcements__mastodon { display: none } .layout-multiple-columns .announcements__container { width: 100% } .reactions-bar { display: flex; flex-wrap: wrap; align-items: center; margin-top: 15px; margin-left: -2px; width: calc(100% - 57px) } .reactions-bar__item { flex-shrink: 0; background: #42485a; border: 0; border-radius: 3px; margin: 2px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0 6px; display: flex; align-items: center; transition: all .1s ease-in; transition-property: background-color, color } .reactions-bar__item__emoji { display: block; margin: 3px 0; width: 16px; height: 16px } .reactions-bar__item__emoji img { display: block; margin: 0; width: 100%; height: 100%; min-width: auto; min-height: auto; vertical-align: bottom; -o-object-fit: contain; font-family: "object-fit:contain"; object-fit: contain } .reactions-bar__item__count { display: block; min-width: 9px; font-size: 13px; font-weight: 500; text-align: center; margin-left: 6px; color: #9baec8 } .reactions-bar__item:active, .reactions-bar__item:focus, .reactions-bar__item:hover { background: #4a5266; transition: all .2s ease-out; transition-property: background-color, color } .reactions-bar__item:active__count, .reactions-bar__item:focus__count, .reactions-bar__item:hover__count { color: #a8b9cf } .reactions-bar__item.active { transition: all .1s ease-in; transition-property: background-color, color; background-color: #3d5673 } .reactions-bar__item.active .reactions-bar__item__count { color: #4ea2df } .reactions-bar .emoji-picker-dropdown { margin: 2px } .reactions-bar:hover .emoji-button { opacity: .85 } .reactions-bar .emoji-button { color: #9baec8; margin: 0; font-size: 16px; width: auto; flex-shrink: 0; padding: 0 6px; height: 22px; display: flex; align-items: center; opacity: .5; transition: all .1s ease-in; transition-property: background-color, color } .reactions-bar .emoji-button:active, .reactions-bar .emoji-button:focus, .reactions-bar .emoji-button:hover { opacity: 1; color: #a8b9cf; transition: all .2s ease-out; transition-property: background-color, color } .reactions-bar--empty .emoji-button { padding: 0 } .notification, .status__wrapper { position: relative } .notification.unread:before, .status__wrapper.unread:before { content: ""; position: absolute; top: 0; left: 0; pointer-events: 0; width: 100%; height: 100%; border-left: 2px solid #2b90d9; pointer-events: none } .picture-in-picture { position: fixed; bottom: 20px; right: 20px; width: 300px } .picture-in-picture__footer { border-radius: 0 0 4px 4px; padding: 12px 10px 10px } .picture-in-picture__footer, .picture-in-picture__header { background: #313543; display: flex; justify-content: space-between } .picture-in-picture__header { border-radius: 4px 4px 0 0; padding: 10px } .picture-in-picture__header__account { display: flex; text-decoration: none } .picture-in-picture__header .account__avatar { margin-right: 10px } .picture-in-picture__header .display-name { color: #fff; text-decoration: none } .picture-in-picture__header .display-name span, .picture-in-picture__header .display-name strong { display: block; text-overflow: ellipsis; overflow: hidden } .picture-in-picture__header .display-name span { color: #9baec8 } .picture-in-picture .audio-player, .picture-in-picture .video-player { border-radius: 0 } .picture-in-picture-placeholder { box-sizing: border-box; border: 2px dashed #393f4f; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px; font-size: 16px; font-weight: 500; cursor: pointer; color: #9baec8 } .picture-in-picture-placeholder i { display: block; font-size: 24px; font-weight: 400; margin-bottom: 10px } .picture-in-picture-placeholder:active, .picture-in-picture-placeholder:focus, .picture-in-picture-placeholder:hover { border-color: #42485a } .notifications-permission-banner { padding: 30px; border-bottom: 1px solid #393f4f; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative } .notifications-permission-banner__close { position: absolute; top: 10px; right: 10px } .notifications-permission-banner h2 { font-size: 16px; font-weight: 500; margin-bottom: 15px; text-align: center } .notifications-permission-banner p { color: #9baec8; margin-bottom: 15px; text-align: center } .poll { margin-top: 16px; font-size: 14px } .poll li { margin-bottom: 10px; position: relative } .poll__chart { border-radius: 4px; display: block; background: #8ba1bf; height: 5px; min-width: 1% } .poll__chart.leading { background: #2b90d9 } .poll progress { border: 0; display: block; width: 100%; height: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent } .poll progress::-webkit-progress-bar { background: transparent } .poll progress::-moz-progress-bar { border-radius: 4px; background: #8ba1bf } .poll progress::-ms-fill { border-radius: 4px; background: #8ba1bf } .poll progress::-webkit-progress-value { border-radius: 4px; background: #8ba1bf } .poll__option { position: relative; display: flex; padding: 6px 0; line-height: 18px; cursor: default; overflow: hidden } .poll__option__text { display: inline-block; word-wrap: break-word; overflow-wrap: break-word; max-width: calc(100% - 70px) } .poll__option input[type=checkbox], .poll__option input[type=radio] { display: none } .poll__option .autossugest-input { flex: 1 1 auto } .poll__option input[type=text] { display: block; box-sizing: border-box; width: 100%; font-size: 14px; color: #282c37; outline: 0; font-family: inherit; background: #fff; border: 1px solid #dbdbdb; border-radius: 4px; padding: 6px 10px } .poll__option input[type=text]:focus { border-color: #2b90d9 } .poll__option.selectable { cursor: pointer } .poll__option.editable { display: flex; align-items: center; overflow: visible } .poll__input { display: inline-block; position: relative; border: 1px solid #9baec8; box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 auto; margin-right: 10px; top: -1px; border-radius: 50%; vertical-align: middle; margin-top: auto; margin-bottom: auto; flex: 0 0 18px } .poll__input.checkbox { border-radius: 4px } .poll__input.active { border-color: #79bd9a; background: #79bd9a } .poll__input:active, .poll__input:focus, .poll__input:hover { border-color: #acd6c1; border-width: 4px } .poll__input::-moz-focus-inner { outline: 0!important; border: 0 } .poll__input:active, .poll__input:focus { outline: 0!important } .poll__number { display: inline-block; width: 45px; font-weight: 700; flex: 0 0 45px } .poll__voted { padding: 0 5px; display: inline-block } .poll__voted__mark { font-size: 18px } .poll__footer { padding-top: 6px; padding-bottom: 5px; color: #606984 } .poll__link { display: inline; background: transparent; padding: 0; margin: 0; border: 0; color: #606984; text-decoration: underline; font-size: inherit } .poll__link:hover { text-decoration: none } .poll__link:active, .poll__link:focus { background-color: rgba(96, 105, 132, .1) } .poll .button { height: 36px; padding: 0 16px; margin-right: 10px; font-size: 14px } .compose-form__poll-wrapper { border-top: 1px solid #ebebeb } .compose-form__poll-wrapper ul { padding: 10px } .compose-form__poll-wrapper .poll__footer { border-top: 1px solid #ebebeb; padding: 10px; display: flex; align-items: center } .compose-form__poll-wrapper .poll__footer button, .compose-form__poll-wrapper .poll__footer select { flex: 1 1 50% } .compose-form__poll-wrapper .poll__footer button:focus, .compose-form__poll-wrapper .poll__footer select:focus { border-color: #2b90d9 } .compose-form__poll-wrapper .button.button-secondary { font-size: 14px; font-weight: 400; padding: 6px 10px; height: auto; line-height: inherit; color: #606984; border-color: #606984; margin-right: 5px } .compose-form__poll-wrapper li { display: flex; align-items: center } .compose-form__poll-wrapper li .poll__option { flex: 0 0 auto; width: calc(100% - 29px); margin-right: 6px } .compose-form__poll-wrapper select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; font-size: 14px; color: #282c37; display: inline-block; width: auto; outline: 0; font-family: inherit; background: #fff url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px; border: 1px solid #dbdbdb; border-radius: 4px; padding: 6px 30px 6px 10px } .compose-form__poll-wrapper .icon-button.disabled { color: #dbdbdb } .muted .poll { color: #606984 } .muted .poll__chart { background: rgba(109, 137, 175, .2) } .muted .poll__chart.leading { background: rgba(43, 144, 217, .2) } .introduction { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background: #282c37 } @media screen and (max-width:920px) { .introduction { display: block!important } } .introduction__pager { background: #17191f; box-shadow: 0 0 15px rgba(0, 0, 0, .2); overflow: hidden } .introduction__frame, .introduction__pager { border-radius: 10px; width: 50vw; min-width: 920px } @media screen and (max-width:920px) { .introduction__frame, .introduction__pager { min-width: 0; width: 100%; border-radius: 0; box-shadow: none } } .introduction__frame-wrapper { opacity: 0; transition: opacity .5s linear } .introduction__frame-wrapper.active { opacity: 1; transition: opacity 50ms linear } .introduction__frame { overflow: hidden } .introduction__illustration { height: 50vh } @media screen and (max-width:630px) { .introduction__illustration { height: auto } } .introduction__illustration img { -o-object-fit: cover; font-family: "object-fit:cover"; object-fit: cover; display: block; margin: 0; width: 100%; height: 100% } .introduction__text { border-top: 2px solid #2b90d9 } .introduction__text--columnized { display: flex } .introduction__text--columnized>div { flex: 1 1 33.33%; text-align: center; padding: 25px 25px 30px } @media screen and (max-width:630px) { .introduction__text--columnized { display: block; padding: 15px 0 20px } .introduction__text--columnized>div { padding: 10px 25px } } .introduction__text h3 { font-size: 24px; line-height: 1.5; font-weight: 700; margin-bottom: 10px } .introduction__text p { font-size: 16px; line-height: 24px; font-weight: 400; color: #9baec8 } .introduction__text p code { display: inline-block; background: #17191f; font-size: 15px; border: 1px solid #393f4f; border-radius: 2px; padding: 1px 3px } .introduction__text--centered { padding: 25px 25px 30px; text-align: center } .introduction__dots { display: flex; align-items: center; justify-content: center; padding: 25px } @media screen and (max-width:630px) { .introduction__dots { display: none } } .introduction__dot { width: 14px; height: 14px; border-radius: 14px; border: 1px solid #2b90d9; background: transparent; margin: 0 3px; cursor: pointer } .introduction__dot:hover { background: #393f4f } .introduction__dot.active { cursor: default; background: #2b90d9 } .introduction__action { padding: 0 25px 25px; display: flex; align-items: center; justify-content: center } .modal-layout { background: #282c37 url('data:image/svg+xml;utf8,') repeat-x bottom fixed; display: flex; flex-direction: column; height: 100vh; padding: 0 } .modal-layout__mastodon { display: flex; flex: 1; flex-direction: column; justify-content: flex-end } .modal-layout__mastodon>* { flex: 1; max-height: 235px; background: url(/packs/media/images/elephant_ui_plane-72f8702db120a51a1cdbc4fb7f5ef59d.svg) no-repeat 0 100%/contain } @media screen and (max-width:600px) { .account-header { margin-top: 0 } } .emoji-mart { font-size: 13px; display: inline-block; color: #282c37 } .emoji-mart, .emoji-mart * { box-sizing: border-box; line-height: 1.15 } .emoji-mart .emoji-mart-emoji { padding: 6px } .emoji-mart-bar { border: 0 solid #c0cdd9 } .emoji-mart-bar:first-child { border-bottom-width: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; background: #d9e1e8 } .emoji-mart-bar:last-child { border-top-width: 1px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; display: none } .emoji-mart-anchors { display: flex; justify-content: space-between; padding: 0 6px; color: #606984; line-height: 0 } .emoji-mart-anchor { position: relative; flex: 1; text-align: center; padding: 12px 4px; overflow: hidden; transition: color .1s ease-out; cursor: pointer } .emoji-mart-anchor:hover { color: #576078 } .emoji-mart-anchor-selected { color: #2b90d9 } .emoji-mart-anchor-selected:hover { color: #2485cb } .emoji-mart-anchor-selected .emoji-mart-anchor-bar { bottom: -1px } .emoji-mart-anchor-bar { position: absolute; bottom: -5px; left: 0; width: 100%; height: 4px; background-color: #2b90d9 } .emoji-mart-anchors i { display: inline-block; width: 100%; max-width: 22px } .emoji-mart-anchors svg { fill: currentColor; max-height: 18px } .emoji-mart-scroll { overflow-y: scroll; height: 270px; max-height: 35vh; padding: 0 6px 6px; background: #fff; will-change: transform } .emoji-mart-scroll::-webkit-scrollbar-track:active, .emoji-mart-scroll::-webkit-scrollbar-track:hover { background-color: rgba(0, 0, 0, .3) } .emoji-mart-search { padding: 10px 45px 10px 10px; background: #fff } .emoji-mart-search input { font-size: 14px; font-weight: 400; padding: 7px 9px; font-family: inherit; display: block; width: 100%; background: rgba(217, 225, 232, .3); color: #282c37; border: 1px solid #d9e1e8; border-radius: 4px } .emoji-mart-search input::-moz-focus-inner { border: 0 } .emoji-mart-search input::-moz-focus-inner, .emoji-mart-search input:active, .emoji-mart-search input:focus { outline: 0!important } .emoji-mart-category .emoji-mart-emoji { cursor: pointer } .emoji-mart-category .emoji-mart-emoji span { z-index: 1; position: relative; text-align: center } .emoji-mart-category .emoji-mart-emoji:hover:before { z-index: 0; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(217, 225, 232, .7); border-radius: 100% } .emoji-mart-category-label { z-index: 2; position: relative; position: -webkit-sticky; position: sticky; top: 0 } .emoji-mart-category-label span { display: block; width: 100%; font-weight: 500; padding: 5px 6px; background: #fff } .emoji-mart-emoji { position: relative; display: inline-block; font-size: 0 } .emoji-mart-emoji span { width: 22px; height: 22px } .emoji-mart-no-results { font-size: 14px; text-align: center; padding-top: 70px; color: #9baec8 } .emoji-mart-no-results .emoji-mart-category-label { display: none } .emoji-mart-no-results .emoji-mart-no-results-label { margin-top: .2em } .emoji-mart-no-results .emoji-mart-emoji:hover:before { content: none } .emoji-mart-preview { display: none } .container { box-sizing: border-box; max-width: 1235px; margin: 0 auto; position: relative } @media screen and (max-width:1255px) { .container { width: 100%; padding: 0 10px } } .rich-formatting { font-family: "mastodon-font-sans-serif", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.7; word-wrap: break-word; color: #9baec8 } .rich-formatting a { color: #2b90d9; text-decoration: underline } .rich-formatting a:active, .rich-formatting a:focus, .rich-formatting a:hover { text-decoration: none } .rich-formatting li, .rich-formatting p { color: #9baec8 } .rich-formatting p { margin-top: 0; margin-bottom: .85em } .rich-formatting p:last-child { margin-bottom: 0 } .rich-formatting strong { font-weight: 700; color: #d9e1e8 } .rich-formatting em { font-style: italic; color: #d9e1e8 } .rich-formatting code { font-size: .85em; background: #17191f; border-radius: 4px; padding: .2em .3em } .rich-formatting h1, .rich-formatting h2, .rich-formatting h3, .rich-formatting h4, .rich-formatting h5, .rich-formatting h6 { font-family: mastodon-font-display, sans-serif; margin-top: 1.275em; margin-bottom: .85em; font-weight: 500; color: #d9e1e8 } .rich-formatting h1 { font-size: 2em } .rich-formatting h2 { font-size: 1.75em } .rich-formatting h3 { font-size: 1.5em } .rich-formatting h4 { font-size: 1.25em } .rich-formatting h5, .rich-formatting h6 { font-size: 1em } .rich-formatting ul { list-style: disc } .rich-formatting ol { list-style: decimal } .rich-formatting ol, .rich-formatting ul { padding: 0 0 0 2em; margin: 0 0 .85em } .rich-formatting ol[type=a], .rich-formatting ul[type=a] { list-style-type: lower-alpha } .rich-formatting ol[type=i], .rich-formatting ul[type=i] { list-style-type: lower-roman } .rich-formatting hr { width: 100%; height: 0; border: 0; border-bottom: 1px solid #313543; margin: 1.7em 0 } .rich-formatting hr.spacer { height: 1px; border: 0 } .rich-formatting table { width: 100%; border-collapse: collapse; -moz-column-break-inside: auto; break-inside: auto; margin-top: 24px; margin-bottom: 32px } .rich-formatting table tbody tr, .rich-formatting table thead tr { border-bottom: 1px solid #313543; font-size: 1em; line-height: 1.625; font-weight: 400; text-align: left; color: #9baec8 } .rich-formatting table thead tr { border-bottom-width: 2px; line-height: 1.5; font-weight: 500; color: #606984 } .rich-formatting table td, .rich-formatting table th { padding: 8px; align-self: start; align-items: start; word-break: break-all } .rich-formatting table td.nowrap, .rich-formatting table th.nowrap { width: 25%; position: relative } .rich-formatting table td.nowrap:before, .rich-formatting table th.nowrap:before { content: " "; visibility: hidden } .rich-formatting table td.nowrap span, .rich-formatting table th.nowrap span { position: absolute; left: 8px; right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .rich-formatting>:first-child { margin-top: 0 } .information-board { background: #1f232b; padding: 20px 0 } .information-board .container-alt { position: relative; padding-right: 295px } .information-board__sections { display: flex; justify-content: space-between; flex-wrap: wrap } .information-board__section { flex: 1 0 0; font-family: "mastodon-font-sans-serif", sans-serif; font-size: 16px; line-height: 28px; color: #fff; text-align: right; padding: 10px 15px } .information-board__section span, .information-board__section strong { display: block } .information-board__section span:last-child { color: #d9e1e8 } .information-board__section strong { font-family: mastodon-font-display, sans-serif; font-weight: 500; font-size: 32px; line-height: 48px } @media screen and (max-width:700px) { .information-board__section { text-align: center } } .information-board .panel { position: absolute; width: 280px; box-sizing: border-box; background: #17191f; padding: 10px 20px 20px; border-radius: 4px 4px 0 0; right: 0; bottom: -40px } .information-board .panel .panel-header { font-family: mastodon-font-display, sans-serif; font-size: 14px; line-height: 24px; font-weight: 500; color: #9baec8; padding-bottom: 5px; margin-bottom: 15px; border-bottom: 1px solid #313543; text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .information-board .panel .panel-header a, .information-board .panel .panel-header span { font-weight: 400; color: #7a93b6 } .information-board .panel .panel-header a { text-decoration: none } .information-board .owner { text-align: center } .information-board .owner .avatar { width: 80px; height: 80px; margin: 0 auto 15px } .information-board .owner .avatar img { display: block; width: 80px; height: 80px; border-radius: 48px } .information-board .owner .name { font-size: 14px } .information-board .owner .name a { display: block; color: #fff; text-decoration: none } .information-board .owner .name a:hover .display_name { text-decoration: underline } .information-board .owner .name .username { display: block; color: #9baec8 } .landing-page li, .landing-page p { font-family: "mastodon-font-sans-serif", sans-serif; font-weight: 400; font-size: 16px; line-height: 30px; margin-bottom: 12px; color: #9baec8 } .landing-page li a, .landing-page p a { color: #2b90d9; text-decoration: underline } .landing-page em { display: inline; margin: 0; padding: 0; font-weight: 700; background: transparent; font-family: inherit; font-size: inherit; line-height: inherit; color: #bcc9da } .landing-page h1 { font-family: mastodon-font-display, sans-serif; font-size: 26px; line-height: 30px; font-weight: 500; margin-bottom: 20px; color: #d9e1e8 } .landing-page h1 small { font-family: "mastodon-font-sans-serif", sans-serif; display: block; font-size: 18px; font-weight: 400; color: #bcc9da } .landing-page h2 { font-family: mastodon-font-display, sans-serif; font-size: 22px; line-height: 26px; font-weight: 500; margin-bottom: 20px; color: #d9e1e8 } .landing-page h3 { font-size: 18px } .landing-page h3, .landing-page h4 { font-family: mastodon-font-display, sans-serif; line-height: 24px; font-weight: 500; margin-bottom: 20px; color: #d9e1e8 } .landing-page h4 { font-size: 16px } .landing-page h5 { font-size: 14px } .landing-page h5, .landing-page h6 { font-family: mastodon-font-display, sans-serif; line-height: 24px; font-weight: 500; margin-bottom: 20px; color: #d9e1e8 } .landing-page h6 { font-size: 12px } .landing-page ol, .landing-page ul { margin-left: 20px } .landing-page ol[type=a], .landing-page ul[type=a] { list-style-type: lower-alpha } .landing-page ol[type=i], .landing-page ul[type=i] { list-style-type: lower-roman } .landing-page ul { list-style: disc } .landing-page ol { list-style: decimal } .landing-page li>ol, .landing-page li>ul { margin-top: 6px } .landing-page hr { width: 100%; height: 0; border: 0; border-bottom: 1px solid rgba(96, 105, 132, .6); margin: 20px 0 } .landing-page hr.spacer { height: 1px; border: 0 } .landing-page__forms, .landing-page__information { padding: 20px } .landing-page__call-to-action { background: #282c37; border-radius: 4px; padding: 25px 40px; overflow: hidden; box-sizing: border-box } .landing-page__call-to-action .row { width: 100%; display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: space-between; align-items: center } .landing-page__call-to-action .row__information-board { display: flex; justify-content: flex-end; align-items: flex-end } .landing-page__call-to-action .row__information-board .information-board__section { flex: 1 0 auto; padding: 0 10px } @media screen and (max-width:415px) { .landing-page__call-to-action .row__information-board { width: 100%; justify-content: space-between } } .landing-page__call-to-action .row__mascot { flex: 1; margin: 10px -50px 0 0 } @media screen and (max-width:415px) { .landing-page__call-to-action .row__mascot { display: none } } .landing-page__logo { margin-right: 20px } .landing-page__logo img { height: 50px; width: auto; mix-blend-mode: lighten } .landing-page__information { padding: 45px 40px; margin-bottom: 10px } .landing-page__information:last-child { margin-bottom: 0 } .landing-page__information strong { font-weight: 500; color: #bcc9da } .landing-page__information .account { border-bottom: 0; padding: 0 } .landing-page__information .account__display-name { align-items: center; display: flex; margin-right: 5px } .landing-page__information .account div.account__display-name:hover .display-name strong { text-decoration: none } .landing-page__information .account div.account__display-name .account__avatar { cursor: default } .landing-page__information .account__avatar-wrapper { margin-left: 0; flex: 0 0 auto } .landing-page__information .account .display-name { font-size: 15px } .landing-page__information .account .display-name__account { font-size: 14px } @media screen and (max-width:960px) { .landing-page__information .contact { margin-top: 30px } } @media screen and (max-width:700px) { .landing-page__information { padding: 25px 20px } } .landing-page #mastodon-timeline, .landing-page__forms, .landing-page__information { box-sizing: border-box; background: #282c37; border-radius: 4px; box-shadow: 0 0 6px rgba(0, 0, 0, .1) } .landing-page__mascot { height: 104px; position: relative; left: -40px; bottom: 25px } .landing-page__mascot img { height: 190px; width: auto } .landing-page__short-description .row { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 40px } @media screen and (max-width:700px) { .landing-page__short-description .row { margin-bottom: 20px } } .landing-page__short-description p a { color: #d9e1e8 } .landing-page__short-description h1 { font-weight: 500; color: #fff; margin-bottom: 0 } .landing-page__short-description h1 small { color: #9baec8 } .landing-page__short-description h1 small span { color: #d9e1e8 } .landing-page__short-description p:last-child { margin-bottom: 0 } .landing-page__hero { margin-bottom: 10px } .landing-page__hero img { display: block; margin: 0; max-width: 100%; height: auto; border-radius: 4px } @media screen and (max-width:840px) { .landing-page .information-board .container-alt { padding-right: 20px } .landing-page .information-board .panel { position: static; margin-top: 20px; width: 100%; border-radius: 4px } .landing-page .information-board .panel .panel-header { text-align: center } } @media screen and (max-width:675px) { .landing-page .header-wrapper { padding-top: 0 } .landing-page .header-wrapper.compact { padding-bottom: 0 } .landing-page .header-wrapper.compact .hero .heading { text-align: initial } .landing-page .features .container-alt, .landing-page .header .container-alt { display: block } } .landing-page .cta { margin: 20px } .landing { margin-bottom: 100px } @media screen and (max-width:738px) { .landing { margin-bottom: 0 } } .landing__brand { display: flex; justify-content: center; align-items: center; padding: 50px } .landing__brand svg { fill: #fff; height: 52px } @media screen and (max-width:415px) { .landing__brand { padding: 0; margin-bottom: 30px } } .landing .directory { margin-top: 30px; background: transparent; box-shadow: none; border-radius: 0 } .landing .hero-widget { margin-top: 30px; margin-bottom: 0 } .landing .hero-widget h4 { padding: 10px; text-transform: uppercase; font-weight: 700; font-size: 13px; color: #9baec8 } .landing .hero-widget__text { border-radius: 0; padding-bottom: 0 } .landing .hero-widget__footer { background: #282c37; padding: 10px; border-radius: 0 0 4px 4px; display: flex } .landing .hero-widget__footer__column { flex: 1 1 50%; overflow-x: hidden } .landing .hero-widget .account { padding: 10px 0; border-bottom: 0 } .landing .hero-widget .account .account__display-name { display: flex; align-items: center } .landing .hero-widget__counters__wrapper { display: flex } .landing .hero-widget__counter { padding: 10px; width: 50% } .landing .hero-widget__counter strong { font-family: mastodon-font-display, sans-serif; font-size: 15px; font-weight: 700; display: block } .landing .hero-widget__counter span { font-size: 14px; color: #9baec8 } .landing .simple_form .user_agreement .label_input>label, .landing .simple_form p.lead { font-weight: 400; color: #9baec8 } .landing .simple_form p.lead { font-size: 15px; line-height: 20px; margin-bottom: 25px } .landing__grid { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 50%) minmax(0, 50%); grid-gap: 30px } @media screen and (max-width:738px) { .landing__grid { grid-template-columns: minmax(0, 100%); grid-gap: 10px } .landing__grid__column-login { grid-row: 1; display: flex; flex-direction: column } .landing__grid__column-login .box-widget { order: 2; flex: 0 0 auto } .landing__grid__column-login .hero-widget { margin-top: 0; margin-bottom: 10px; order: 1; flex: 0 0 auto } .landing__grid__column-registration { grid-row: 2 } .landing__grid .directory { margin-top: 10px } } @media screen and (max-width:415px) { .landing__grid { grid-gap: 0 } .landing__grid .hero-widget { display: block; margin-bottom: 0; box-shadow: none } .landing__grid .hero-widget__footer, .landing__grid .hero-widget__img, .landing__grid .hero-widget__img img { border-radius: 0 } .landing__grid .box-widget, .landing__grid .directory__tag, .landing__grid .hero-widget { border-bottom: 1px solid #393f4f } .landing__grid .directory { margin-top: 0 } .landing__grid .directory__tag { margin-bottom: 0 } .landing__grid .directory__tag>a, .landing__grid .directory__tag>div { border-radius: 0; box-shadow: none } .landing__grid .directory__tag:last-child { border-bottom: 0 } } .brand { position: relative; text-decoration: none } .brand__tagline { display: block; position: absolute; bottom: -10px; left: 50px; width: 300px; color: #9baec8; text-decoration: none; font-size: 14px } @media screen and (max-width:415px) { .brand__tagline { position: static; width: auto; margin-top: 20px; color: #606984 } } .table { width: 100%; max-width: 100%; border-spacing: 0; border-collapse: collapse } .table td, .table th { padding: 8px; line-height: 18px; vertical-align: top; border-top: 1px solid #282c37; text-align: left; background: #1f232b } .table>thead>tr>th { vertical-align: bottom; border-bottom: 2px solid #282c37; border-top: 0; font-weight: 500 } .table>tbody>tr>th { font-weight: 500 } .table>tbody>tr:nth-child(odd)>td, .table>tbody>tr:nth-child(odd)>th { background: #282c37 } .table a { color: #2b90d9; text-decoration: underline } .table a:hover { text-decoration: none } .table strong { font-weight: 500 } .table strong:lang(ja), .table strong:lang(ko), .table strong:lang(zh-CN), .table strong:lang(zh-HK), .table strong:lang(zh-TW) { font-weight: 700 } .table.inline-table>tbody>tr:nth-child(odd)>td, .table.inline-table>tbody>tr:nth-child(odd)>th { background: transparent } .table.inline-table>tbody>tr:first-child>td, .table.inline-table>tbody>tr:first-child>th { border-top: 0 } .table.batch-table>thead>tr>th { background: #282c37; border-top: 1px solid #17191f; border-bottom: 1px solid #17191f } .table.batch-table>thead>tr>th:first-child { border-radius: 4px 0 0; border-left: 1px solid #17191f } .table.batch-table>thead>tr>th:last-child { border-radius: 0 4px 0 0; border-right: 1px solid #17191f } .table--invites tbody td { vertical-align: middle } .table-wrapper { overflow: auto; margin-bottom: 20px } samp { font-family: "mastodon-font-monospace", monospace } button.table-action-link { background: transparent; border: 0; font: inherit } a.table-action-link, button.table-action-link { text-decoration: none; display: inline-block; margin-right: 5px; padding: 0 10px; color: #9baec8; font-weight: 500 } a.table-action-link:hover, button.table-action-link:hover { color: #fff } a.table-action-link i.fa, button.table-action-link i.fa { font-weight: 400; margin-right: 5px } a.table-action-link:first-child, button.table-action-link:first-child { padding-left: 0 } .batch-table__row, .batch-table__toolbar { display: flex } .batch-table__row__select, .batch-table__toolbar__select { box-sizing: border-box; padding: 8px 16px; cursor: pointer; min-height: 100% } .batch-table__row__select input, .batch-table__toolbar__select input { margin-top: 8px } .batch-table__row__select--aligned, .batch-table__toolbar__select--aligned { display: flex; align-items: center } .batch-table__row__select--aligned input, .batch-table__toolbar__select--aligned input { margin-top: 0 } .batch-table__row__actions, .batch-table__row__content, .batch-table__toolbar__actions, .batch-table__toolbar__content { padding: 8px 16px 8px 0; flex: 1 1 auto } .batch-table__toolbar { border: 1px solid #17191f; background: #282c37; border-radius: 4px 0 0; height: 47px; align-items: center } .batch-table__toolbar__actions { text-align: right; padding-right: 11px } .batch-table__form { padding: 16px; border: 1px solid #17191f; border-top: 0; background: #282c37 } .batch-table__form .fields-row { padding-top: 0; margin-bottom: 0 } .batch-table__row { border: 1px solid #17191f; border-top: 0; background: #1f232b } @media screen and (max-width:415px) { .optional .batch-table__row:first-child { border-top: 1px solid #17191f } } .batch-table__row:hover { background: #242731 } .batch-table__row:nth-child(2n) { background: #282c37 } .batch-table__row:nth-child(2n):hover { background: #2c313d } .batch-table__row__content { padding-top: 12px; padding-bottom: 16px } .batch-table__row__content--unpadded { padding: 0 } .batch-table__row__content--with-image { display: flex; align-items: center } .batch-table__row__content__image { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; margin-right: 10px } .batch-table__row__content__image .emojione { width: 32px; height: 32px } .batch-table__row__content__text { flex: 1 1 auto } .batch-table__row__content__extra { flex: 0 0 auto; text-align: right; color: #9baec8; font-weight: 500 } .batch-table__row .directory__tag { margin: 0; width: 100% } .batch-table__row .directory__tag a { background: transparent; border-radius: 0 } @media screen and (max-width:415px) { .batch-table.optional .batch-table__row__select, .batch-table.optional .batch-table__toolbar { display: none } } .batch-table .status__content { padding-top: 0 } .batch-table .status__content summary { display: list-item } .batch-table .status__content strong { font-weight: 700 } .batch-table .nothing-here { border: 1px solid #17191f; border-top: 0; box-shadow: none } @media screen and (max-width:415px) { .batch-table .nothing-here { border-top: 1px solid #17191f } } @media screen and (max-width:870px) { .batch-table .accounts-table tbody td.optional { display: none } } .admin-wrapper { display: flex; justify-content: center; width: 100%; min-height: 100vh } .admin-wrapper .sidebar-wrapper { min-height: 100vh; overflow: hidden; pointer-events: none; flex: 1 1 auto } .admin-wrapper .sidebar-wrapper__inner { display: flex; justify-content: flex-end; background: #282c37; height: 100% } .admin-wrapper .sidebar { width: 240px; padding: 0; pointer-events: auto } .admin-wrapper .sidebar__toggle { display: none; background: #393f4f; height: 48px } .admin-wrapper .sidebar__toggle__logo { flex: 1 1 auto } .admin-wrapper .sidebar__toggle__logo a { display: inline-block; padding: 15px } .admin-wrapper .sidebar__toggle__logo svg { fill: #fff; height: 20px; position: relative; bottom: -2px } .admin-wrapper .sidebar__toggle__icon { display: block; color: #9baec8; text-decoration: none; flex: 0 0 auto; font-size: 20px; padding: 15px } .admin-wrapper .sidebar__toggle a:active, .admin-wrapper .sidebar__toggle a:focus, .admin-wrapper .sidebar__toggle a:hover { background: #42485a } .admin-wrapper .sidebar .logo { display: block; margin: 40px auto; width: 100px; height: 100px } @media screen and (max-width:600px) { .admin-wrapper .sidebar>a:first-child { display: none } } .admin-wrapper .sidebar ul { list-style: none; border-radius: 4px 0 0 4px; overflow: hidden; margin-bottom: 20px } @media screen and (max-width:600px) { .admin-wrapper .sidebar ul { margin-bottom: 0 } } .admin-wrapper .sidebar ul a { display: block; padding: 15px; color: #9baec8; text-decoration: none; transition: all .2s linear; transition-property: color, background-color; border-radius: 4px 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .admin-wrapper .sidebar ul a i.fa { margin-right: 5px } .admin-wrapper .sidebar ul a:hover { color: #fff; background-color: #1d2028; transition: all .1s linear; transition-property: color, background-color } .admin-wrapper .sidebar ul a.selected { background: #242731; border-radius: 4px 0 0 } .admin-wrapper .sidebar ul ul { background: #1f232b; border-radius: 0 0 0 4px; margin: 0 } .admin-wrapper .sidebar ul ul a { border: 0; padding: 15px 35px } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a { color: #fff; background-color: #2b90d9; border-bottom: 0; border-radius: 0 } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover { background-color: #419bdd } .admin-wrapper .sidebar>ul>.simple-navigation-active-leaf a { border-radius: 4px 0 0 4px } .admin-wrapper .content-wrapper { box-sizing: border-box; width: 100%; max-width: 840px; flex: 1 1 auto } @media screen and (max-width:1080px) { .admin-wrapper .sidebar-wrapper--empty { display: none } .admin-wrapper .sidebar-wrapper { width: 240px; flex: 0 0 auto } } @media screen and (max-width:600px) { .admin-wrapper .sidebar-wrapper { width: 100% } } .admin-wrapper .content { padding: 55px 15px 20px 25px } @media screen and (max-width:600px) { .admin-wrapper .content { max-width: none; padding: 30px 15px 15px } } .admin-wrapper .content-heading { display: flex; padding-bottom: 36px; border-bottom: 1px solid #393f4f; margin: -15px -15px 40px 0; flex-wrap: wrap; align-items: center; justify-content: space-between } .admin-wrapper .content-heading>* { margin-top: 15px; margin-right: 15px } .admin-wrapper .content-heading-actions { display: inline-flex } .admin-wrapper .content-heading-actions>:not(:first-child) { margin-left: 5px } @media screen and (max-width:600px) { .admin-wrapper .content-heading { border-bottom: 0; padding-bottom: 0 } } .admin-wrapper .content h2 { color: #d9e1e8; font-size: 24px; line-height: 36px; font-weight: 400 } @media screen and (max-width:600px) { .admin-wrapper .content h2 { font-weight: 700 } } .admin-wrapper .content h3 { color: #d9e1e8; font-size: 20px; line-height: 28px; font-weight: 400; margin-bottom: 30px } .admin-wrapper .content h4 { text-transform: uppercase; font-size: 13px; font-weight: 700; color: #9baec8; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #393f4f } .admin-wrapper .content h6 { font-size: 16px; color: #d9e1e8; line-height: 28px; font-weight: 500 } .admin-wrapper .content .fields-group h6 { color: #fff; font-weight: 500 } .admin-wrapper .content .directory__tag>a, .admin-wrapper .content .directory__tag>div { box-shadow: none } .admin-wrapper .content .directory__tag .table-action-link .fa { color: inherit } .admin-wrapper .content .directory__tag h4 { font-size: 18px; font-weight: 700; color: #fff; text-transform: none; padding-bottom: 0; margin-bottom: 0; border-bottom: 0 } .admin-wrapper .content>p { font-size: 14px; line-height: 21px; color: #d9e1e8; margin-bottom: 20px } .admin-wrapper .content>p strong { color: #fff; font-weight: 500 } .admin-wrapper .content>p strong:lang(ja), .admin-wrapper .content>p strong:lang(ko), .admin-wrapper .content>p strong:lang(zh-CN), .admin-wrapper .content>p strong:lang(zh-HK), .admin-wrapper .content>p strong:lang(zh-TW) { font-weight: 700 } .admin-wrapper .content hr { width: 100%; height: 0; border: 0; border-bottom: 1px solid rgba(96, 105, 132, .6); margin: 20px 0 } .admin-wrapper .content hr.spacer { height: 1px; border: 0 } @media screen and (max-width:600px) { .admin-wrapper { display: block } .admin-wrapper .sidebar-wrapper { min-height: 0 } .admin-wrapper .sidebar { width: 100%; padding: 0; height: auto } .admin-wrapper .sidebar__toggle { display: flex } .admin-wrapper .sidebar>ul { display: none } .admin-wrapper .sidebar ul a, .admin-wrapper .sidebar ul ul a { border-radius: 0; border-bottom: 1px solid #313543; transition: none } .admin-wrapper .sidebar ul a:hover, .admin-wrapper .sidebar ul ul a:hover { transition: none } .admin-wrapper .sidebar ul ul { border-radius: 0 } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a { border-bottom-color: #2b90d9 } } hr.spacer { width: 100%; border: 0; margin: 20px 0; height: 1px } .admin-wrapper .content .muted-hint, body .muted-hint { color: #9baec8 } .admin-wrapper .content .muted-hint a, body .muted-hint a { color: #2b90d9 } .admin-wrapper .content .positive-hint, body .positive-hint { color: #79bd9a; font-weight: 500 } .admin-wrapper .content .negative-hint, body .negative-hint { color: #df405a; font-weight: 500 } .admin-wrapper .content .neutral-hint, body .neutral-hint { color: #606984; font-weight: 500 } .admin-wrapper .content .warning-hint, body .warning-hint { color: #ca8f04; font-weight: 500 } .filters { display: flex; flex-wrap: wrap } .filters .filter-subset { flex: 0 0 auto; margin: 0 40px 20px 0 } .filters .filter-subset:last-child { margin-bottom: 30px } .filters .filter-subset ul { margin-top: 5px; list-style: none } .filters .filter-subset ul li { display: inline-block; margin-right: 5px } .filters .filter-subset strong { font-weight: 500; text-transform: uppercase; font-size: 12px } .filters .filter-subset strong:lang(ja), .filters .filter-subset strong:lang(ko), .filters .filter-subset strong:lang(zh-CN), .filters .filter-subset strong:lang(zh-HK), .filters .filter-subset strong:lang(zh-TW) { font-weight: 700 } .filters .filter-subset--with-select strong { display: block; margin-bottom: 10px } .filters .filter-subset a { display: inline-block; color: #9baec8; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 500; border-bottom: 2px solid #282c37 } .filters .filter-subset a:hover { color: #fff; border-bottom: 2px solid #333846 } .filters .filter-subset a.selected { color: #2b90d9; border-bottom: 2px solid #2b90d9 } .report-accounts { display: flex; flex-wrap: wrap; margin-bottom: 20px } .report-accounts__item { display: flex; flex: 250px; flex-direction: column; margin: 0 5px } .report-accounts__item>strong { display: block; margin: 0 0 10px -5px; font-weight: 500; font-size: 14px; line-height: 18px; color: #d9e1e8 } .report-accounts__item>strong:lang(ja), .report-accounts__item>strong:lang(ko), .report-accounts__item>strong:lang(zh-CN), .report-accounts__item>strong:lang(zh-HK), .report-accounts__item>strong:lang(zh-TW) { font-weight: 700 } .report-accounts__item .account-card { flex: 1 1 auto } .account-status, .report-status { display: flex; margin-bottom: 10px } .account-status .activity-stream, .report-status .activity-stream { flex: 2 0 0; margin-right: 20px; max-width: calc(100% - 60px) } .account-status .activity-stream .entry, .report-status .activity-stream .entry { border-radius: 4px } .account-status__actions, .report-status__actions { flex: 0 0 auto; display: flex; flex-direction: column } .account-status__actions .icon-button, .report-status__actions .icon-button { font-size: 24px; width: 24px; text-align: center; margin-bottom: 10px } .simple_form.new_account_moderation_note, .simple_form.new_report_note { max-width: 100% } .simple_form .actions { margin-top: 15px } .simple_form .button { font-size: 15px } .batch-form-box { display: flex; flex-wrap: wrap; margin-bottom: 5px } .batch-form-box #form_status_batch_action { margin: 0 5px 5px 0; font-size: 14px } .batch-form-box input.button { margin: 0 5px 5px 0 } .batch-form-box .media-spoiler-toggle-buttons { margin-left: auto } .batch-form-box .media-spoiler-toggle-buttons .button { overflow: visible; margin: 0 0 5px 5px; float: right } .back-link { margin-bottom: 10px; font-size: 14px } .back-link a { color: #2b90d9; text-decoration: none } .back-link a:hover { text-decoration: underline } .back-link, .special-action-button { text-align: right; flex: 1 1 auto } .action-buttons { display: flex; overflow: hidden; justify-content: space-between } .spacer { flex: 1 1 auto } .log-entry { line-height: 20px; padding: 15px 0; background: #282c37; border-bottom: 1px solid #313543 } .log-entry:last-child { border-bottom: 0 } .log-entry__header { display: flex; justify-content: flex-start; align-items: center; color: #9baec8; font-size: 14px; padding: 0 10px } .log-entry__avatar { margin-right: 10px } .log-entry__avatar .avatar { display: block; margin: 0; border-radius: 50%; width: 40px; height: 40px } .log-entry__content { max-width: calc(100% - 90px) } .log-entry__title { word-wrap: break-word } .log-entry__timestamp { color: #606984 } .log-entry .target, .log-entry .username, .log-entry a { color: #d9e1e8; text-decoration: none; font-weight: 500 } .inline-name-tag, .name-tag, a.inline-name-tag, a.name-tag { text-decoration: none; color: #d9e1e8 } .inline-name-tag .username, .name-tag .username, a.inline-name-tag .username, a.name-tag .username { font-weight: 500 } .inline-name-tag.suspended .username, .name-tag.suspended .username, a.inline-name-tag.suspended .username, a.name-tag.suspended .username { text-decoration: line-through; color: #e87487 } .inline-name-tag.suspended .avatar, .name-tag.suspended .avatar, a.inline-name-tag.suspended .avatar, a.name-tag.suspended .avatar { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .8 } .name-tag, a.name-tag { display: flex; align-items: center } .name-tag .avatar, a.name-tag .avatar { display: block; margin: 0 5px 0 0; border-radius: 50% } .name-tag.suspended .avatar, a.name-tag.suspended .avatar { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: .8 } .speech-bubble { margin-bottom: 20px; border-left: 4px solid #2b90d9 } .speech-bubble.positive { border-left-color: #79bd9a } .speech-bubble.negative { border-left-color: #e87487 } .speech-bubble.warning { border-left-color: #ca8f04 } .speech-bubble__bubble { padding: 16px 16px 16px 14px; font-size: 15px; line-height: 20px; border-radius: 4px 4px 4px 0; position: relative; font-weight: 500 } .speech-bubble__bubble a { color: #9baec8 } .speech-bubble__owner { padding: 8px 8px 8px 12px } .speech-bubble time { color: #606984 } .report-card { background: #282c37; border-radius: 4px; margin-bottom: 20px } .report-card__profile { display: flex; justify-content: space-between; align-items: center; padding: 15px } .report-card__profile .account { padding: 0; border: 0 } .report-card__profile .account__avatar-wrapper { margin-left: 0 } .report-card__profile__stats { flex: 0 0 auto; font-weight: 500; color: #9baec8; text-transform: uppercase; text-align: right } .report-card__profile__stats a { color: inherit; text-decoration: none } .report-card__profile__stats a:active, .report-card__profile__stats a:focus, .report-card__profile__stats a:hover { color: #b5c3d6 } .report-card__profile__stats .red { color: #df405a } .report-card__summary__item { display: flex; justify-content: flex-start; border-top: 1px solid #1f232b } .report-card__summary__item:hover { background: #2c313d } .report-card__summary__item__assigned, .report-card__summary__item__reported-by { padding: 15px; flex: 0 0 auto; box-sizing: border-box; width: 150px; color: #9baec8 } .report-card__summary__item__assigned, .report-card__summary__item__assigned .username, .report-card__summary__item__reported-by, .report-card__summary__item__reported-by .username { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .report-card__summary__item__content { flex: 1 1 auto; max-width: calc(100% - 300px) } .report-card__summary__item__content__icon { color: #606984; margin-right: 4px; font-weight: 500 } .report-card__summary__item__content a { display: block; box-sizing: border-box; width: 100%; padding: 15px; text-decoration: none; color: #9baec8 } .one-line { white-space: nowrap } .ellipsized-ip, .one-line { overflow: hidden; text-overflow: ellipsis } .ellipsized-ip { display: inline-block; max-width: 120px; vertical-align: middle } .admin-account-bio { display: flex; flex-wrap: wrap; margin: 20px -5px 0 } .admin-account-bio>div { box-sizing: border-box; padding: 0 5px; margin-bottom: 10px; flex: 1 0 50% } .admin-account-bio .account__header__content, .admin-account-bio .account__header__fields { background: #393f4f; border-radius: 4px; height: 100% } .admin-account-bio .account__header__fields { margin: 0; border: 0 } .admin-account-bio .account__header__fields a { color: #4ea2df } .admin-account-bio .account__header__fields dl:first-child .verified { border-radius: 0 4px 0 0 } .admin-account-bio .account__header__fields .verified a { color: #79bd9a } .admin-account-bio .account__header__content { box-sizing: border-box; padding: 20px; color: #fff } .center-text { text-align: center } .announcements-list { border: 1px solid #313543; border-radius: 4px } .announcements-list__item { padding: 15px 0; background: #282c37; border-bottom: 1px solid #313543 } .announcements-list__item__title { padding: 0 15px; display: block; font-weight: 500; font-size: 18px; line-height: 1.5; color: #d9e1e8; text-decoration: none; margin-bottom: 10px } .announcements-list__item__title:active, .announcements-list__item__title:focus, .announcements-list__item__title:hover { color: #fff } .announcements-list__item__meta { padding: 0 15px; color: #606984 } .announcements-list__item__action-bar { display: flex; justify-content: space-between; align-items: center } .announcements-list__item:last-child { border-bottom: 0 } .account-badges { margin: -2px 0 } .dashboard__counters.admin-account-counters { margin-top: 10px } .dashboard__counters { display: flex; flex-wrap: wrap; margin: 0 -5px 20px } .dashboard__counters>div { box-sizing: border-box; flex: 0 0 33.333%; padding: 0 5px; margin-bottom: 10px } .dashboard__counters>div>a, .dashboard__counters>div>div { padding: 20px; background: #313543; border-radius: 4px; box-sizing: border-box; height: 100% } .dashboard__counters>div>a { text-decoration: none; color: inherit; display: block } .dashboard__counters>div>a:active, .dashboard__counters>div>a:focus, .dashboard__counters>div>a:hover { background: #393f4f } .dashboard__counters__num, .dashboard__counters__text { text-align: center; font-weight: 500; font-size: 24px; line-height: 21px; color: #fff; font-family: mastodon-font-display, sans-serif; margin-bottom: 20px; line-height: 30px } .dashboard__counters__text { font-size: 18px } .dashboard__counters__label { font-size: 14px; color: #9baec8; text-align: center; font-weight: 500 } .dashboard__widgets { display: flex; flex-wrap: wrap; margin: 0 -5px } .dashboard__widgets>div { flex: 0 0 33.333%; margin-bottom: 20px } .dashboard__widgets>div>div { padding: 0 5px } .dashboard__widgets a:not(.name-tag) { color: #d9e1e8; font-weight: 500; text-decoration: none } body.rtl { direction: rtl } body.rtl .column-header>button { text-align: right; padding-left: 0; padding-right: 15px } body.rtl .radio-button__input { margin-right: 0; margin-left: 10px } body.rtl .directory__card__bar .display-name { margin-left: 0; margin-right: 15px } body.rtl .announcements__item, body.rtl .display-name { text-align: right } body.rtl .announcements__item__range { padding-right: 0; padding-left: 18px } body.rtl .reactions-bar { margin-left: auto; margin-right: -2px; direction: rtl } body.rtl .reactions-bar__item__count { margin-left: 0; margin-right: 6px } body.rtl .announcements__pagination { right: auto; left: 0 } body.rtl .notification__message { margin-left: 0; margin-right: 68px } body.rtl .announcements__mastodon, body.rtl .drawer__inner__mastodon>img { transform: scaleX(-1) } body.rtl .notification__favourite-icon-wrapper { left: auto; right: -26px } body.rtl .landing-page__logo { margin-right: 0; margin-left: 20px } body.rtl .landing-page .features-list .features-list__row .visual { margin-left: 0; margin-right: 15px } body.rtl .column-header__icon, body.rtl .column-link__icon { margin-right: 0; margin-left: 5px } body.rtl .compose-form .compose-form__buttons-wrapper .character-counter__wrapper { margin-right: 0; margin-left: 4px } body.rtl .navigation-bar__profile { margin-left: 0; margin-right: 8px } body.rtl .search__input { padding-right: 10px; padding-left: 30px } body.rtl .search__icon .fa { right: auto; left: 10px } body.rtl .columns-area { direction: rtl } body.rtl .column-header__buttons { left: 0; right: auto; margin-left: 0; margin-right: -15px } body.rtl .column-inline-form .icon-button { margin-left: 0; margin-right: 5px } body.rtl .column-header__links .text-btn { margin-left: 10px; margin-right: 0 } body.rtl .account__avatar-wrapper { float: right } body.rtl .column-header__back-button { padding-left: 5px; padding-right: 0 } body.rtl .column-header__setting-arrows { float: left } body.rtl .setting-toggle__label { margin-left: 0; margin-right: 8px } body.rtl .status__avatar { left: auto; right: 10px } body.rtl .activity-stream .status.light, body.rtl .status { padding-left: 10px; padding-right: 68px } body.rtl .activity-stream .status.light .status__display-name, body.rtl .status__info .status__display-name { padding-left: 25px; padding-right: 0 } body.rtl .activity-stream .pre-header { padding-right: 68px; padding-left: 0 } body.rtl .status__prepend { margin-left: 0; margin-right: 68px } body.rtl .status__prepend-icon-wrapper { left: auto; right: -26px } body.rtl .activity-stream .pre-header .pre-header__icon { left: auto; right: 42px } body.rtl .account__header__tabs__buttons>.icon-button { margin-right: 0; margin-left: 8px } body.rtl .account__avatar-overlay-overlay, body.rtl .column-back-button--slim-button { right: auto; left: 0 } body.rtl .activity-stream .status.light .status__header .status__meta, body.rtl .status__relative-time, body.rtl .status__visibility-icon { float: left } body.rtl .status__action-bar__counter { margin-right: 0; margin-left: 11px } body.rtl .status__action-bar__counter .status__action-bar-button { margin-right: 0; margin-left: 4px } body.rtl .status__action-bar-button { float: right; margin-right: 0; margin-left: 18px } body.rtl .status__action-bar-dropdown { float: right } body.rtl .privacy-dropdown__dropdown { margin-left: 0; margin-right: 40px } body.rtl .privacy-dropdown__option__icon { margin-left: 10px; margin-right: 0 } body.rtl .detailed-status__display-name .display-name, body.rtl .picture-in-picture__header__account .display-name { text-align: right } body.rtl .detailed-status__display-avatar { margin-right: 0; margin-left: 10px; float: right } body.rtl .picture-in-picture__header__account .account__avatar { margin-right: 0; margin-left: 10px } body.rtl .icon-button__counter { margin-left: 0; margin-right: 4px } body.rtl .notifications-permission-banner__close { right: auto; left: 10px } body.rtl .detailed-status__favorites, body.rtl .detailed-status__reblogs { margin-left: 0; margin-right: 6px } body.rtl .fa-ul { margin-left: 2.14285714em } body.rtl .fa-li { left: auto; right: -2.14285714em } body.rtl .admin-wrapper { direction: rtl } body.rtl .admin-wrapper .sidebar ul a i.fa, body.rtl a.table-action-link i.fa { margin-right: 0; margin-left: 5px } body.rtl .simple_form .check_boxes .checkbox label { padding-left: 0; padding-right: 25px } body.rtl .simple_form .input.with_label.boolean label.checkbox { padding-left: 25px; padding-right: 0 } body.rtl .simple_form .check_boxes .checkbox input[type=checkbox], body.rtl .simple_form .input.boolean input[type=checkbox], body.rtl .simple_form .input.radio_buttons .radio { left: auto; right: 0 } body.rtl .simple_form .input.radio_buttons .radio>label { padding-right: 28px; padding-left: 0 } body.rtl .simple_form .input-with-append .input input { padding-left: 142px; padding-right: 0 } body.rtl .simple_form .input.boolean label.checkbox { left: auto; right: 0 } body.rtl .simple_form .input.boolean .hint, body.rtl .simple_form .input.boolean .label_input { padding-left: 0; padding-right: 28px } body.rtl .simple_form .label_input__append { right: auto; left: 3px } body.rtl .simple_form .label_input__append:after { right: auto; left: 0; background-image: linear-gradient(270deg, rgba(19, 20, 25, 0), #131419) } body.rtl .simple_form select { background: #131419 url("data:image/svg+xml;utf8,") no-repeat left 8px center/auto 16px } body.rtl .table td, body.rtl .table th { text-align: right } body.rtl .filters .filter-subset { margin-right: 0; margin-left: 45px } body.rtl .landing-page .header-wrapper .mascot { right: 60px; left: auto } body.rtl .landing-page__call-to-action .row__information-board { direction: rtl } body.rtl .landing-page .header .hero .floats .float-1 { left: -120px; right: auto } body.rtl .landing-page .header .hero .floats .float-2 { left: 210px; right: auto } body.rtl .landing-page .header .hero .floats .float-3 { left: 110px; right: auto } body.rtl .landing-page .header .links .brand img { left: 0 } body.rtl .landing-page .fa-external-link { padding-right: 5px; padding-left: 0!important } body.rtl .landing-page .features #mastodon-timeline { margin-right: 0; margin-left: 30px } @media screen and (min-width:631px) { body.rtl .column, body.rtl .drawer { padding-left: 5px; padding-right: 5px } body.rtl .column:first-child, body.rtl .drawer:first-child { padding-left: 5px; padding-right: 10px } body.rtl .columns-area>div .column, body.rtl .columns-area>div .drawer { padding-left: 5px; padding-right: 5px } } body.rtl .columns-area--mobile .column, body.rtl .columns-area--mobile .drawer { padding-left: 0; padding-right: 0 } body.rtl .public-layout .header .nav-button { margin-left: 8px; margin-right: 0 } body.rtl .public-layout .public-account-header__tabs { margin-left: 0; margin-right: 20px } body.rtl .landing-page__information .account__display-name { margin-right: 0; margin-left: 5px } body.rtl .landing-page__information .account__avatar-wrapper { margin-left: 12px; margin-right: 0 } body.rtl .card__bar .display-name { margin-left: 0; margin-right: 15px; text-align: right } body.rtl .fa-chevron-left:before { content: "" } body.rtl .fa-chevron-right:before { content: "" } body.rtl .column-back-button__icon { margin-right: 0; margin-left: 5px } body.rtl .column-header__setting-arrows .column-header__setting-btn:last-child { padding-left: 0; padding-right: 10px } body.rtl .simple_form .input.radio_buttons .radio>label input { left: auto; right: 0 } body.rtl .picture-in-picture { right: auto; left: 20px } .emojione[title=":back:"], .emojione[title=":copyright:"], .emojione[title=":curly_loop:"], .emojione[title=":currency_exchange:"], .emojione[title=":end:"], .emojione[title=":heavy_check_mark:"], .emojione[title=":heavy_division_sign:"], .emojione[title=":heavy_dollar_sign:"], .emojione[title=":heavy_minus_sign:"], .emojione[title=":heavy_multiplication_x:"], .emojione[title=":heavy_plus_sign:"], .emojione[title=":on:"], .emojione[title=":registered:"], .emojione[title=":soon:"], .emojione[title=":spider:"], .emojione[title=":telephone_receiver:"], .emojione[title=":tm:"], .emojione[title=":top:"], .emojione[title=":wavy_dash:"] { -webkit-filter: invert(1); filter: invert(1) } /*# sourceMappingURL=default-08e1136f.chunk.css.map*/