Skip to content

Instantly share code, notes, and snippets.

@ilovecomputers

ilovecomputers/niu95.css

Created August 16, 2018 08:33
Show Gist options
  • Save ilovecomputers/603234e5c002fd1bf926411064766d8e to your computer and use it in GitHub Desktop.
Save ilovecomputers/603234e5c002fd1bf926411064766d8e to your computer and use it in GitHub Desktop.
Download ZIP
N I U 95
Raw
niu95.css
/*
** N I U 95
** Merely a compiled copy of cybre.space's M A S T O D O N 95 theme: https://github.com/cybrespace/mastodon/blob/cybrespace/app/javascript/styles/win95.scss
** and I modified the start menu sidebar height.
**
** Modify the height rule for the `getting-started__footer::after` selector to suit your instance
**
** To use this style:
** Install Stylus for Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/?src=search
** or Chrome: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en
**
** and copy and paste this style for your mastodon instance
*/
@font-face {
font-family: "premillenium";
src: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/premillenium/MSSansSerif.ttf") format("truetype");
}
@font-face {
font-family: "mastodon-font-sans-serif";
src: local("Roboto"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-italic-webfont.woff2") format("woff2"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-italic-webfont.woff") format("woff"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-italic-webfont.ttf") format("truetype"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-italic-webfont.svg#roboto-italic-webfont") format("svg");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "mastodon-font-sans-serif";
src: local("Roboto"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-bold-webfont.woff2") format("woff2"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-bold-webfont.woff") format("woff"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-bold-webfont.ttf") format("truetype"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-bold-webfont.svg#roboto-bold-webfont") format("svg");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "mastodon-font-sans-serif";
src: local("Roboto"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-medium-webfont.woff2") format("woff2"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-medium-webfont.woff") format("woff"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-medium-webfont.ttf") format("truetype"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/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("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-regular-webfont.woff2") format("woff2"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-regular-webfont.woff") format("woff"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-regular-webfont.ttf") format("truetype"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto/roboto-regular-webfont.svg#roboto-regular-webfont") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "mastodon-font-monospace";
src: local("Roboto Mono"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto-mono/robotomono-regular-webfont.woff2") format("woff2"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto-mono/robotomono-regular-webfont.woff") format("woff"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto-mono/robotomono-regular-webfont.ttf") format("truetype"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/roboto-mono/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("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/montserrat/Montserrat-Regular.woff2") format("woff2"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/montserrat/Montserrat-Regular.woff") format("woff"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "mastodon-font-display";
src: local("Montserrat"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-thumb {
background: #313543;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: #353a49;
}
::-webkit-scrollbar-thumb:active {
background: #313543;
}
::-webkit-scrollbar-track {
border: 0px none #ffffff;
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-track:hover {
background: #282c37;
}
::-webkit-scrollbar-track:active {
background: #282c37;
}
::-webkit-scrollbar-corner {
background: transparent;
}
body {
font-family: "mastodon-font-sans-serif", sans-serif;
background: #282c37;
background-size: cover;
background-attachment: fixed;
font-size: 13px;
line-height: 18px;
font-weight: 400;
color: #ffffff;
padding-bottom: 20px;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
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 {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
background: #282c37;
}
body.about-body {
background: #17191f;
padding-bottom: 0;
}
body.tag-body {
background: #17191f;
padding-bottom: 0;
}
body.player {
text-align: center;
}
body.embed {
background: transparent;
margin: 0;
padding-bottom: 0;
}
body.embed .container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
body.admin {
background: #1f232b;
position: fixed;
width: 100%;
height: 100%;
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 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 {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
outline: 0 !important;
}
.container-alt {
width: 700px;
margin: 0 auto;
margin-top: 40px;
}
@media screen and (max-width: 740px) {
.container-alt {
width: 100%;
margin: 0;
}
}
.logo-container {
margin: 100px auto;
margin-bottom: 50px;
}
@media screen and (max-width: 400px) {
.logo-container {
margin: 30px auto;
margin-bottom: 20px;
}
}
.logo-container h1 {
display: flex;
justify-content: center;
align-items: center;
}
.logo-container h1 img {
height: 42px;
margin-right: 10px;
}
.logo-container h1 a {
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
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;
margin: 0 auto;
padding: 20px 0;
margin-top: 40px;
box-sizing: border-box;
}
@media screen and (max-width: 400px) {
.compose-standalone .compose-form {
width: 100%;
margin-top: 0;
padding: 20px;
}
}
.media-standalone__body {
overflow: hidden;
}
.account-header {
width: 400px;
margin: 0 auto;
display: flex;
font-size: 13px;
line-height: 18px;
box-sizing: border-box;
padding: 20px 0;
padding-bottom: 0;
margin-bottom: -30px;
margin-top: 40px;
}
@media screen and (max-width: 440px) {
.account-header {
width: 100%;
margin: 0;
margin-bottom: 10px;
padding: 20px;
padding-bottom: 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;
}
.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;
}
.footer {
text-align: center;
margin-top: 30px;
padding-bottom: 60px;
font-size: 12px;
color: #9baec8;
}
.footer .footer__domain {
font-weight: 500;
}
.footer .footer__domain a {
color: inherit;
text-decoration: none;
}
.footer .powered-by,
.footer .single-user-login {
font-weight: 400;
}
.footer .powered-by a,
.footer .single-user-login a {
color: inherit;
text-decoration: underline;
font-weight: 500;
}
.footer .powered-by a:hover,
.footer .single-user-login a:hover {
text-decoration: none;
}
.footer .powered-by img,
.footer .single-user-login img {
margin: 0 4px;
position: relative;
bottom: -1px;
height: 18px;
vertical-align: top;
}
.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;
}
.landing-strip,
.memoriam-strip {
background: rgba(25, 27, 34, 0.8);
color: #9baec8;
font-weight: 400;
padding: 14px;
border-radius: 4px;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.landing-strip strong,
.landing-strip a,
.memoriam-strip strong,
.memoriam-strip a {
font-weight: 500;
}
.landing-strip strong:lang(ja),
.landing-strip a:lang(ja),
.memoriam-strip strong:lang(ja),
.memoriam-strip a:lang(ja) {
font-weight: 700;
}
.landing-strip strong:lang(ko),
.landing-strip a:lang(ko),
.memoriam-strip strong:lang(ko),
.memoriam-strip a:lang(ko) {
font-weight: 700;
}
.landing-strip strong:lang(zh-CN),
.landing-strip a:lang(zh-CN),
.memoriam-strip strong:lang(zh-CN),
.memoriam-strip a:lang(zh-CN) {
font-weight: 700;
}
.landing-strip strong:lang(zh-HK),
.landing-strip a:lang(zh-HK),
.memoriam-strip strong:lang(zh-HK),
.memoriam-strip a:lang(zh-HK) {
font-weight: 700;
}
.landing-strip strong:lang(zh-TW),
.landing-strip a:lang(zh-TW),
.memoriam-strip strong:lang(zh-TW),
.memoriam-strip a:lang(zh-TW) {
font-weight: 700;
}
.landing-strip a,
.memoriam-strip a {
color: inherit;
text-decoration: underline;
}
.landing-strip .logo,
.memoriam-strip .logo {
width: 30px;
height: 30px;
flex: 0 0 auto;
margin-right: 15px;
}
@media screen and (max-width: 740px) {
.landing-strip,
.memoriam-strip {
margin-bottom: 0;
}
}
.memoriam-strip {
background: rgba(0, 0, 0, 0.7);
}
.moved-strip {
padding: 14px;
border-radius: 4px;
background: rgba(25, 27, 34, 0.8);
color: #d9e1e8;
font-weight: 400;
margin-bottom: 20px;
}
.moved-strip strong,
.moved-strip a {
font-weight: 500;
}
.moved-strip strong:lang(ja),
.moved-strip a:lang(ja) {
font-weight: 700;
}
.moved-strip strong:lang(ko),
.moved-strip a:lang(ko) {
font-weight: 700;
}
.moved-strip strong:lang(zh-CN),
.moved-strip a:lang(zh-CN) {
font-weight: 700;
}
.moved-strip strong:lang(zh-HK),
.moved-strip a:lang(zh-HK) {
font-weight: 700;
}
.moved-strip strong:lang(zh-TW),
.moved-strip a:lang(zh-TW) {
font-weight: 700;
}
.moved-strip a {
color: inherit;
text-decoration: underline;
}
.moved-strip a.mention {
text-decoration: none;
}
.moved-strip a.mention span {
text-decoration: none;
}
.moved-strip a.mention:focus, .moved-strip a.mention:hover, .moved-strip a.mention:active {
text-decoration: none;
}
.moved-strip a.mention:focus span, .moved-strip a.mention:hover span, .moved-strip a.mention:active span {
text-decoration: underline;
}
.moved-strip__message {
margin-bottom: 15px;
}
.moved-strip__message .fa {
margin-right: 5px;
color: #9baec8;
}
.moved-strip__card .detailed-status__display-avatar {
position: relative;
cursor: pointer;
}
.moved-strip__card .detailed-status__display-name {
margin-bottom: 0;
text-decoration: none;
}
.moved-strip__card .detailed-status__display-name span {
color: #00007f;
font-weight: 400;
}
code {
font-family: "mastodon-font-monospace", monospace;
font-weight: 400;
}
.form-container {
max-width: 400px;
padding: 20px;
margin: 0 auto;
}
.simple_form .input {
margin-bottom: 15px;
overflow: hidden;
}
.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 span.hint {
display: block;
color: #9baec8;
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;
color: #9baec8;
}
.simple_form p.hint.subtle-hint a {
color: #00007f;
}
.simple_form .card {
margin-bottom: 15px;
}
.simple_form strong {
font-weight: 500;
}
.simple_form strong:lang(ja) {
font-weight: 700;
}
.simple_form strong:lang(ko) {
font-weight: 700;
}
.simple_form strong:lang(zh-CN) {
font-weight: 700;
}
.simple_form strong:lang(zh-HK) {
font-weight: 700;
}
.simple_form strong:lang(zh-TW) {
font-weight: 700;
}
.simple_form .label_input {
display: flex;
}
.simple_form .label_input label {
flex: 0 0 auto;
}
.simple_form .label_input input {
flex: 1 1 auto;
}
.simple_form .input.with_label {
padding: 15px 0;
margin-bottom: 0;
}
.simple_form .input.with_label .label_input {
flex-wrap: wrap;
align-items: flex-start;
}
.simple_form .input.with_label.file .label_input {
flex-wrap: nowrap;
}
.simple_form .input.with_label.select .label_input {
align-items: initial;
}
.simple_form .input.with_label .label_input > label {
font-family: inherit;
font-size: 16px;
color: #ffffff;
display: block;
padding-top: 5px;
margin-bottom: 5px;
flex: 1;
min-width: 150px;
word-wrap: break-word;
}
.simple_form .input.with_label .label_input > label.select {
flex: 0;
}
.simple_form .input.with_label .label_input > label ~ * {
margin-left: 10px;
}
.simple_form .input.with_label ul {
flex: 390px;
}
.simple_form .input.with_label.boolean {
padding: initial;
margin-bottom: initial;
}
.simple_form .input.with_label.boolean .label_input > label {
font-family: inherit;
font-size: 14px;
color: #ffffff;
display: block;
width: auto;
}
.simple_form .input.with_label.boolean label.checkbox {
position: relative;
padding-left: 25px;
flex: 1 1 auto;
}
.simple_form .input.with_block_label {
padding-top: 15px;
}
.simple_form .input.with_block_label > label {
font-family: inherit;
font-size: 16px;
color: #ffffff;
display: block;
padding-top: 5px;
}
.simple_form .input.with_block_label .hint {
margin-bottom: 15px;
}
.simple_form .input.with_block_label li {
float: left;
width: 50%;
}
.simple_form .fields-group {
margin-bottom: 25px;
}
.simple_form .input.radio_buttons .radio label {
margin-bottom: 5px;
font-family: inherit;
font-size: 14px;
color: #ffffff;
display: block;
width: auto;
}
.simple_form .input.boolean {
margin-bottom: 5px;
}
.simple_form .input.boolean label {
font-family: inherit;
font-size: 14px;
color: #ffffff;
display: block;
width: auto;
}
.simple_form .input.boolean label.checkbox {
position: relative;
padding-left: 25px;
flex: 1 1 auto;
}
.simple_form .input.boolean input[type=checkbox] {
position: absolute;
left: 0;
top: 5px;
margin: 0;
}
.simple_form .input.boolean .hint {
padding-left: 25px;
margin-left: 0;
}
.simple_form .check_boxes .checkbox label {
font-family: inherit;
font-size: 14px;
color: #ffffff;
display: 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[type=text],
.simple_form input[type=number],
.simple_form input[type=email],
.simple_form input[type=password],
.simple_form textarea {
background: transparent;
box-sizing: border-box;
border: 0;
border-bottom: 2px solid #9baec8;
border-radius: 2px 2px 0 0;
padding: 7px 4px;
font-size: 16px;
color: #ffffff;
display: block;
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
}
.simple_form input[type=text]:invalid,
.simple_form input[type=number]:invalid,
.simple_form input[type=email]:invalid,
.simple_form input[type=password]:invalid,
.simple_form textarea:invalid {
box-shadow: none;
}
.simple_form input[type=text]:focus:invalid,
.simple_form input[type=number]:focus:invalid,
.simple_form input[type=email]:focus:invalid,
.simple_form input[type=password]:focus:invalid,
.simple_form textarea:focus:invalid {
border-bottom-color: #e87487;
}
.simple_form input[type=text]:required:valid,
.simple_form input[type=number]:required:valid,
.simple_form input[type=email]:required:valid,
.simple_form input[type=password]:required:valid,
.simple_form textarea:required:valid {
border-bottom-color: #79bd9a;
}
.simple_form input[type=text]:active, .simple_form input[type=text]:focus,
.simple_form input[type=number]:active,
.simple_form input[type=number]:focus,
.simple_form input[type=email]:active,
.simple_form input[type=email]:focus,
.simple_form input[type=password]:active,
.simple_form input[type=password]:focus,
.simple_form textarea:active,
.simple_form textarea:focus {
border-bottom-color: #00007f;
background: rgba(0, 0, 0, 0.1);
}
.simple_form .input.field_with_errors label {
color: #e87487;
}
.simple_form .input.field_with_errors input[type=text],
.simple_form .input.field_with_errors input[type=email],
.simple_form .input.field_with_errors input[type=password] {
border-bottom-color: #79bd9a;
}
.simple_form .input.field_with_errors .error {
display: block;
font-weight: 500;
color: #e87487;
margin-top: 4px;
}
.simple_form .actions {
margin-top: 30px;
display: flex;
}
.simple_form .actions.actions--top {
margin-top: 0;
margin-bottom: 30px;
}
.simple_form button,
.simple_form .button,
.simple_form .block-button {
display: block;
width: 100%;
border: 0;
border-radius: 4px;
background: #00007f;
color: #ffffff;
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 button:last-child,
.simple_form .button:last-child,
.simple_form .block-button:last-child {
margin-right: 0;
}
.simple_form button:hover,
.simple_form .button:hover,
.simple_form .block-button:hover {
background-color: #000099;
}
.simple_form button:active, .simple_form button:focus,
.simple_form .button:active,
.simple_form .button:focus,
.simple_form .block-button:active,
.simple_form .block-button:focus {
background-color: #000066;
}
.simple_form button.negative,
.simple_form .button.negative,
.simple_form .block-button.negative {
background: #df405a;
}
.simple_form button.negative:hover,
.simple_form .button.negative:hover,
.simple_form .block-button.negative:hover {
background-color: #e3566d;
}
.simple_form button.negative:active, .simple_form button.negative:focus,
.simple_form .button.negative:active,
.simple_form .button.negative:focus,
.simple_form .block-button.negative:active,
.simple_form .block-button.negative:focus {
background-color: #db2a47;
}
.simple_form select {
font-size: 16px;
max-height: 29px;
}
.simple_form .input-with-append {
position: relative;
}
.simple_form .input-with-append .input input {
padding-right: 142px;
}
.simple_form .input-with-append .append {
position: absolute;
right: 0;
top: 0;
padding: 7px 4px;
padding-bottom: 9px;
font-size: 16px;
color: #404040;
font-family: inherit;
pointer-events: none;
cursor: default;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
}
.simple_form .input-with-append .append::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 1px;
width: 5px;
background-image: linear-gradient(to right, rgba(40, 44, 55, 0), #282c37);
}
.flash-message {
background: #393f4f;
color: #9baec8;
border-radius: 4px;
padding: 15px 10px;
margin-bottom: 30px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
text-align: center;
}
.flash-message p {
margin-bottom: 15px;
}
.flash-message .oauth-code {
outline: 0;
box-sizing: border-box;
display: block;
width: 100%;
border: none;
padding: 10px;
font-family: "mastodon-font-monospace", monospace;
background: #282c37;
color: #ffffff;
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:focus, .flash-message .oauth-code:active {
outline: 0 !important;
}
.flash-message .oauth-code:focus {
background: #313543;
}
.flash-message strong {
font-weight: 500;
}
.flash-message strong:lang(ja) {
font-weight: 700;
}
.flash-message strong:lang(ko) {
font-weight: 700;
}
.flash-message strong:lang(zh-CN) {
font-weight: 700;
}
.flash-message strong:lang(zh-HK) {
font-weight: 700;
}
.flash-message strong:lang(zh-TW) {
font-weight: 700;
}
@media screen and (max-width: 740px) and (min-width: 441px) {
.flash-message {
margin-top: 40px;
}
}
.form-footer {
margin-top: 30px;
text-align: center;
}
.form-footer a {
color: #9baec8;
text-decoration: none;
}
.form-footer a:hover {
text-decoration: underline;
}
.oauth-prompt,
.follow-prompt {
margin-bottom: 30px;
text-align: center;
color: #9baec8;
}
.oauth-prompt h2,
.follow-prompt h2 {
font-size: 16px;
margin-bottom: 30px;
}
.oauth-prompt strong,
.follow-prompt strong {
color: #d9e1e8;
font-weight: 500;
}
.oauth-prompt strong:lang(ja),
.follow-prompt strong:lang(ja) {
font-weight: 700;
}
.oauth-prompt strong:lang(ko),
.follow-prompt strong:lang(ko) {
font-weight: 700;
}
.oauth-prompt strong:lang(zh-CN),
.follow-prompt strong:lang(zh-CN) {
font-weight: 700;
}
.oauth-prompt strong:lang(zh-HK),
.follow-prompt strong:lang(zh-HK) {
font-weight: 700;
}
.oauth-prompt strong:lang(zh-TW),
.follow-prompt strong:lang(zh-TW) {
font-weight: 700;
}
@media screen and (max-width: 740px) and (min-width: 441px) {
.oauth-prompt,
.follow-prompt {
margin-top: 40px;
}
}
.qr-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.qr-code {
flex: 0 0 auto;
background: #ffffff;
padding: 4px;
margin: 0 10px 20px 0;
box-shadow: 0 0 15px rgba(0, 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) {
font-weight: 700;
}
.table-form p strong:lang(ko) {
font-weight: 700;
}
.table-form p strong:lang(zh-CN) {
font-weight: 700;
}
.table-form p strong:lang(zh-HK) {
font-weight: 700;
}
.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, 0.5);
color: #ffffff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
border-radius: 4px;
padding: 10px;
margin-bottom: 15px;
}
.simple_form .warning a,
.table-form .warning a {
color: #ffffff;
text-decoration: underline;
}
.simple_form .warning a:hover, .simple_form .warning a:focus, .simple_form .warning a:active,
.table-form .warning a:hover,
.table-form .warning a:focus,
.table-form .warning a:active {
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),
.table-form .warning strong:lang(ja) {
font-weight: 700;
}
.simple_form .warning strong:lang(ko),
.table-form .warning strong:lang(ko) {
font-weight: 700;
}
.simple_form .warning strong:lang(zh-CN),
.table-form .warning strong:lang(zh-CN) {
font-weight: 700;
}
.simple_form .warning strong:lang(zh-HK),
.table-form .warning strong:lang(zh-HK) {
font-weight: 700;
}
.simple_form .warning strong:lang(zh-TW),
.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 0;
padding-right: 20px;
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: #ffffff;
text-align: center;
margin-bottom: 20px;
border: 0;
padding: 0;
}
.alternative-login .button {
display: block;
}
.scope-danger {
color: #ff5050;
}
.card {
background-color: #000000;
background-size: cover;
background-position: center;
border-radius: 4px 4px 0 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
display: flex;
}
.card::after {
background: rgba(23, 25, 31, 0.5);
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
@media screen and (max-width: 740px) {
.card {
border-radius: 0;
box-shadow: none;
}
}
.card .card__illustration {
padding: 60px 0;
position: relative;
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
}
.card .card__bio {
max-width: 260px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
background: rgba(23, 25, 31, 0.8);
position: relative;
z-index: 2;
}
.card.compact {
padding: 30px 0;
border-radius: 4px;
}
.card.compact .avatar {
margin-bottom: 0;
}
.card.compact .avatar img {
object-fit: cover;
}
.card .name {
display: block;
font-size: 20px;
line-height: 27px;
color: #ffffff;
padding: 10px 15px;
padding-bottom: 0;
font-weight: 500;
position: relative;
z-index: 2;
margin-bottom: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
.card .name small {
display: block;
font-size: 14px;
color: #00007f;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
}
.card .name small .fa {
margin-left: 3px;
}
.card .avatar {
width: 120px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.card .avatar img {
width: 120px;
height: 120px;
display: block;
border-radius: 120px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.card .roles {
margin-bottom: 30px;
padding: 0 15px;
}
.card .details-counters {
margin-top: 30px;
display: flex;
flex-direction: row;
width: 100%;
}
.card .counter {
width: 33.3%;
box-sizing: border-box;
flex: 0 0 auto;
color: #9baec8;
padding: 5px 10px 0;
margin-bottom: 10px;
border-right: 1px solid #313543;
cursor: default;
text-align: center;
position: relative;
}
.card .counter a {
display: block;
}
.card .counter:last-child {
border-right: 0;
}
.card .counter::after {
display: block;
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
border-bottom: 4px solid #9baec8;
opacity: 0.5;
transition: all 400ms ease;
}
.card .counter.active::after {
border-bottom: 4px solid #00007f;
opacity: 1;
}
.card .counter:hover::after {
opacity: 1;
transition-duration: 100ms;
}
.card .counter a {
text-decoration: none;
color: inherit;
}
.card .counter .counter-label {
font-size: 12px;
display: block;
margin-bottom: 5px;
}
.card .counter .counter-number {
font-weight: 500;
font-size: 18px;
color: #ffffff;
font-family: "mastodon-font-display", sans-serif;
}
.card .bio {
font-size: 14px;
line-height: 18px;
padding: 0 15px;
color: #d9e1e8;
}
@media screen and (max-width: 480px) {
.card {
display: block;
}
.card .card__bio {
max-width: none;
}
.card .name,
.card .roles {
text-align: center;
margin-bottom: 15px;
}
.card .bio {
margin-bottom: 15px;
}
}
.card .controls,
.account-grid-card .controls {
position: absolute;
top: 15px;
left: 15px;
z-index: 2;
}
.card .controls .icon-button,
.account-grid-card .controls .icon-button {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 13px;
line-height: 13px;
font-weight: 500;
}
.card .controls .icon-button .fa,
.account-grid-card .controls .icon-button .fa {
font-weight: 400;
margin-right: 5px;
}
.card .controls .icon-button:hover, .card .controls .icon-button:active, .card .controls .icon-button:focus,
.account-grid-card .controls .icon-button:hover,
.account-grid-card .controls .icon-button:active,
.account-grid-card .controls .icon-button:focus {
color: #ffffff;
}
.account-grid-card .controls {
left: auto;
right: 15px;
}
.pagination {
padding: 30px 0;
text-align: center;
overflow: hidden;
}
.pagination a,
.pagination .current,
.pagination .newer,
.pagination .older,
.pagination .page,
.pagination .gap {
font-size: 14px;
color: #ffffff;
font-weight: 500;
display: inline-block;
padding: 6px 10px;
text-decoration: none;
}
.pagination .current {
background: #ffffff;
border-radius: 100px;
color: #282c37;
cursor: default;
margin: 0 10px;
}
.pagination .gap {
cursor: default;
}
.pagination .older,
.pagination .newer {
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;
}
}
.accounts-grid {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
background: #ebebeb;
border-radius: 0 0 4px 4px;
padding: 20px 5px;
padding-bottom: 10px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
z-index: 2;
position: relative;
}
.accounts-grid.empty img {
position: absolute;
opacity: 0.2;
height: 200px;
left: 0;
bottom: 0;
pointer-events: none;
}
@media screen and (max-width: 740px) {
.accounts-grid {
border-radius: 0;
box-shadow: none;
}
}
.accounts-grid .account-grid-card {
box-sizing: border-box;
width: 335px;
background: #ffffff;
border-radius: 4px;
color: #282c37;
margin: 0 5px 10px;
position: relative;
}
@media screen and (max-width: 740px) {
.accounts-grid .account-grid-card {
width: calc(100% - 10px);
}
}
.accounts-grid .account-grid-card .account-grid-card__header {
overflow: hidden;
height: 100px;
border-radius: 4px 4px 0 0;
background-color: #313543;
background-size: cover;
background-position: center;
position: relative;
}
.accounts-grid .account-grid-card .account-grid-card__header::after {
background: rgba(23, 25, 31, 0.5);
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.accounts-grid .account-grid-card .account-grid-card__avatar {
box-sizing: border-box;
padding: 15px;
position: absolute;
z-index: 2;
top: 58px;
left: -2px;
}
.accounts-grid .account-grid-card .avatar {
width: 80px;
height: 80px;
}
.accounts-grid .account-grid-card .avatar img {
display: block;
width: 80px;
height: 80px;
border-radius: 80px;
border: 2px solid #ffffff;
background: #ffffff;
}
.accounts-grid .account-grid-card .name {
padding: 15px;
padding-top: 10px;
padding-left: 110px;
}
.accounts-grid .account-grid-card .name a {
display: block;
color: #282c37;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
font-weight: 500;
}
.accounts-grid .account-grid-card .name a:hover .display_name {
text-decoration: underline;
}
.accounts-grid .account-grid-card .display_name {
font-size: 16px;
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
.accounts-grid .account-grid-card .username {
color: #404040;
font-size: 14px;
font-weight: 400;
}
.accounts-grid .account-grid-card .account__header__content {
padding: 10px 15px;
padding-top: 15px;
color: #404040;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
height: 5.5em;
position: relative;
}
.accounts-grid .account-grid-card .account__header__content::after {
display: block;
content: "";
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.01) 0%, white 100%);
left: 0;
border-radius: 0 0 4px 4px;
pointer-events: none;
}
.nothing-here {
width: 100%;
display: block;
color: #9baec8;
font-size: 14px;
font-weight: 500;
text-align: center;
padding: 130px 0;
padding-top: 125px;
margin: 0 auto;
cursor: default;
}
.account-card {
border-radius: 4px;
text-align: left;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
background: #ffffff;
}
.account-card__header {
background: #000000;
background-size: cover;
background-position: center center;
height: 90px;
border-radius: 4px 4px 0 0;
}
.account-card > .detailed-status__display-name {
display: block;
overflow: hidden;
display: flex;
align-items: center;
padding: 10px;
}
.account-card > .detailed-status__display-name:last-child {
margin-bottom: 0;
}
.account-card > .detailed-status__display-name > div:first-child {
flex: 0 0 auto;
margin-right: 10px;
width: 48px;
height: 48px;
}
.account-card > .detailed-status__display-name .avatar {
display: block;
border-radius: 4px;
margin: 0;
}
.account-card > .detailed-status__display-name .display-name {
flex: 1 0 auto;
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: default;
}
.account-card > .detailed-status__display-name .display-name > .detailed-status__display-name {
margin-bottom: 0;
}
.account-card > .detailed-status__display-name .display-name strong {
font-weight: 500;
color: #282c37;
}
.account-card > .detailed-status__display-name .display-name strong:lang(ja) {
font-weight: 700;
}
.account-card > .detailed-status__display-name .display-name strong:lang(ko) {
font-weight: 700;
}
.account-card > .detailed-status__display-name .display-name strong:lang(zh-CN) {
font-weight: 700;
}
.account-card > .detailed-status__display-name .display-name strong:lang(zh-HK) {
font-weight: 700;
}
.account-card > .detailed-status__display-name .display-name strong:lang(zh-TW) {
font-weight: 700;
}
.account-card > .detailed-status__display-name .display-name span {
font-size: 14px;
color: #9baec8;
}
.account-card > .detailed-status__display-name:hover .display-name strong {
text-decoration: none;
}
.account-card .counter {
box-sizing: border-box;
flex: 0 0 auto;
color: #9baec8;
padding: 0 10px;
cursor: default;
text-align: center;
position: relative;
line-height: 24px;
}
.account-card .counter .counter-label {
font-size: 12px;
display: block;
text-transform: uppercase;
}
.account-card .counter .counter-number {
font-weight: 500;
font-size: 16px;
color: #282c37;
font-family: "mastodon-font-display", sans-serif;
}
.activity-stream-tabs {
background: #ffffff;
border-bottom: 1px solid #d9e1e8;
position: relative;
z-index: 2;
}
.activity-stream-tabs a {
display: inline-block;
padding: 15px;
text-decoration: none;
color: #00007f;
text-transform: uppercase;
font-weight: 500;
}
.activity-stream-tabs a:hover, .activity-stream-tabs a:active, .activity-stream-tabs a:focus {
color: #0000a8;
}
.activity-stream-tabs a.active {
color: #282c37;
cursor: default;
}
.account-role {
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, 0.1);
border: 1px solid rgba(217, 225, 232, 0.5);
}
.account-role.moderator {
color: #79bd9a;
background-color: rgba(121, 189, 154, 0.1);
border-color: rgba(121, 189, 154, 0.5);
}
.account-role.admin {
color: #e87487;
background-color: rgba(232, 116, 135, 0.1);
border-color: rgba(232, 116, 135, 0.5);
}
.account__header__fields {
padding: 0;
margin: 15px -15px -15px;
border: 0 none;
border-top: 1px solid #313543;
border-bottom: 1px solid #313543;
font-size: 14px;
line-height: 20px;
}
.account__header__fields dl {
display: flex;
border-bottom: 1px solid #313543;
}
.account__header__fields dt,
.account__header__fields dd {
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, 0.5);
}
.account__header__fields dd {
flex: 1 1 auto;
color: #9baec8;
}
.account__header__fields a {
color: #00007f;
text-decoration: none;
}
.account__header__fields a:hover, .account__header__fields a:focus, .account__header__fields a:active {
text-decoration: underline;
}
.account__header__fields dl:last-child {
border-bottom: 0;
}
.activity-stream {
clear: both;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.activity-stream .entry {
background: #ffffff;
}
.activity-stream .entry .detailed-status.light,
.activity-stream .entry .status.light,
.activity-stream .entry .more.light {
border-bottom: 1px solid #d9e1e8;
animation: none;
}
.activity-stream .entry:last-child,
.activity-stream .entry:last-child .detailed-status.light,
.activity-stream .entry:last-child .status.light {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
.activity-stream .entry:first-child,
.activity-stream .entry:first-child .detailed-status.light,
.activity-stream .entry:first-child .status.light {
border-radius: 4px 4px 0 0;
}
.activity-stream .entry:first-child:last-child,
.activity-stream .entry:first-child:last-child .detailed-status.light,
.activity-stream .entry:first-child:last-child .status.light {
border-radius: 4px;
}
@media screen and (max-width: 740px) {
.activity-stream .entry,
.activity-stream .entry .detailed-status.light,
.activity-stream .entry .status.light {
border-radius: 0 !important;
}
}
.activity-stream.with-header .entry:first-child,
.activity-stream.with-header .entry:first-child .detailed-status.light,
.activity-stream.with-header .entry:first-child .status.light {
border-radius: 0;
}
.activity-stream.with-header .entry:first-child:last-child,
.activity-stream.with-header .entry:first-child:last-child .detailed-status.light,
.activity-stream.with-header .entry:first-child:last-child .status.light {
border-radius: 0 0 4px 4px;
}
.activity-stream .media-gallery__gifv__label {
bottom: 9px;
}
.activity-stream .status.light {
padding: 14px 14px 14px 76px;
position: relative;
min-height: 48px;
cursor: default;
}
.activity-stream .status.light .status__header {
font-size: 15px;
}
.activity-stream .status.light .status__header .status__meta {
float: right;
font-size: 14px;
}
.activity-stream .status.light .status__header .status__meta .status__relative-time {
color: #404040;
}
.activity-stream .status.light .status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
color: #282c37;
}
.activity-stream .status.light .status__avatar {
position: absolute;
left: 14px;
top: 14px;
width: 48px;
height: 48px;
}
.activity-stream .status.light .status__avatar > div {
width: 48px;
height: 48px;
}
.activity-stream .status.light .status__avatar img {
display: block;
border-radius: 4px;
}
.activity-stream .status.light .display-name {
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.activity-stream .status.light .display-name strong {
font-weight: 500;
color: #282c37;
}
.activity-stream .status.light .display-name strong:lang(ja) {
font-weight: 700;
}
.activity-stream .status.light .display-name strong:lang(ko) {
font-weight: 700;
}
.activity-stream .status.light .display-name strong:lang(zh-CN) {
font-weight: 700;
}
.activity-stream .status.light .display-name strong:lang(zh-HK) {
font-weight: 700;
}
.activity-stream .status.light .display-name strong:lang(zh-TW) {
font-weight: 700;
}
.activity-stream .status.light .display-name span {
font-size: 14px;
color: #9baec8;
}
.activity-stream .status.light .status__content {
color: #282c37;
}
.activity-stream .status.light .status__content a {
color: #00007f;
}
.activity-stream .status.light .status__content a.status__content__spoiler-link {
color: #ffffff;
background: #282c37;
}
.activity-stream .status.light .status__content a.status__content__spoiler-link:hover {
background: #393f4f;
}
.activity-stream .detailed-status.light {
padding: 14px;
background: #ffffff;
cursor: default;
}
.activity-stream .detailed-status.light .detailed-status__display-name {
display: block;
overflow: hidden;
margin-bottom: 15px;
}
.activity-stream .detailed-status.light .detailed-status__display-name > div {
float: left;
margin-right: 10px;
}
.activity-stream .detailed-status.light .detailed-status__display-name .display-name {
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.activity-stream .detailed-status.light .detailed-status__display-name .display-name strong {
font-weight: 500;
color: #282c37;
}
.activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(ja) {
font-weight: 700;
}
.activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(ko) {
font-weight: 700;
}
.activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(zh-CN) {
font-weight: 700;
}
.activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(zh-HK) {
font-weight: 700;
}
.activity-stream .detailed-status.light .detailed-status__display-name .display-name strong:lang(zh-TW) {
font-weight: 700;
}
.activity-stream .detailed-status.light .detailed-status__display-name .display-name span {
font-size: 14px;
color: #9baec8;
}
.activity-stream .detailed-status.light .avatar {
width: 48px;
height: 48px;
}
.activity-stream .detailed-status.light .avatar img {
display: block;
border-radius: 4px;
}
.activity-stream .detailed-status.light .status__content {
color: #282c37;
}
.activity-stream .detailed-status.light .status__content a {
color: #00007f;
}
.activity-stream .detailed-status.light .status__content a.status__content__spoiler-link {
color: #ffffff;
background: #282c37;
}
.activity-stream .detailed-status.light .status__content a.status__content__spoiler-link:hover {
background: #393f4f;
}
.activity-stream .detailed-status.light .detailed-status__meta {
margin-top: 15px;
color: #9baec8;
font-size: 14px;
line-height: 18px;
}
.activity-stream .detailed-status.light .detailed-status__meta a {
color: inherit;
}
.activity-stream .detailed-status.light .detailed-status__meta span > span {
font-weight: 500;
font-size: 12px;
margin-left: 6px;
display: inline-block;
}
.activity-stream .detailed-status.light .status-card {
border-color: #e6ebf0;
color: #404040;
}
.activity-stream .detailed-status.light .status-card:hover {
background: #e6ebf0;
}
.activity-stream .detailed-status.light .status-card__title,
.activity-stream .detailed-status.light .status-card__description {
color: #282c37;
}
.activity-stream .detailed-status.light .status-card__image {
background: #d9e1e8;
}
.activity-stream .media-spoiler {
background: #282c37;
color: #9baec8;
}
.activity-stream .pre-header {
padding: 14px 0;
padding-left: 76px;
padding-bottom: 0;
margin-bottom: -4px;
color: #9baec8;
font-size: 14px;
position: relative;
}
.activity-stream .pre-header .pre-header__icon {
position: absolute;
left: 46px;
}
.activity-stream .pre-header .status__display-name.muted strong {
color: #9baec8;
}
.activity-stream .open-in-web-link {
text-decoration: none;
}
.activity-stream .open-in-web-link:hover {
text-decoration: underline;
}
.activity-stream .more {
color: #9baec8;
display: block;
padding: 14px;
text-align: center;
}
.activity-stream .more:not(:hover) {
text-decoration: none;
}
.embed .activity-stream {
box-shadow: none;
}
.entry .detailed-status.light {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.entry .detailed-status.light .detailed-status__display-name {
flex: 1;
margin: 0 5px 15px 0;
}
.entry .detailed-status.light .button.button-secondary.logo-button {
flex: 0 auto;
font-size: 14px;
background: #00007f;
color: #ffffff;
border: 0;
}
.entry .detailed-status.light .button.button-secondary.logo-button svg {
width: 20px;
height: auto;
vertical-align: middle;
margin-right: 5px;
}
.entry .detailed-status.light .button.button-secondary.logo-button svg path:first-child {
fill: #ffffff;
}
.entry .detailed-status.light .button.button-secondary.logo-button svg path:last-child {
fill: #00007f;
}
.entry .detailed-status.light .button.button-secondary.logo-button:active, .entry .detailed-status.light .button.button-secondary.logo-button:focus, .entry .detailed-status.light .button.button-secondary.logo-button:hover {
background: #0000b2;
}
.entry .detailed-status.light .button.button-secondary.logo-button:active svg path:last-child, .entry .detailed-status.light .button.button-secondary.logo-button:focus svg path:last-child, .entry .detailed-status.light .button.button-secondary.logo-button:hover svg path:last-child {
fill: #0000b2;
}
.entry .detailed-status.light .status__content,
.entry .detailed-status.light .detailed-status__meta {
flex: 100%;
}
button.icon-button i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23404040' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%2300007F' stroke-width='0'/></svg>");
}
button.icon-button i.fa-retweet:hover {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%23525252' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%2300007F' stroke-width='0'/></svg>");
}
button.icon-button.disabled i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%231F1F1F' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='%2300007F' stroke-width='0'/></svg>");
}
.app-body {
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.button {
background-color: #00007f;
border: 10px none;
border-radius: 4px;
box-sizing: border-box;
color: #ffffff;
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 100ms ease-in;
white-space: nowrap;
width: auto;
}
.button:active, .button:focus, .button:hover {
background-color: #0000b2;
transition: all 200ms ease-out;
}
.button:disabled {
background-color: #9baec8;
cursor: default;
}
.button::-moz-focus-inner {
border: 0;
}
.button::-moz-focus-inner, .button:focus, .button:active {
outline: 0 !important;
}
.button.button-primary, .button.button-alternative, .button.button-secondary, .button.button-alternative-2 {
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: #404040;
}
.button.button-alternative-2:active, .button.button-alternative-2:focus, .button.button-alternative-2:hover {
background-color: #4a4a4a;
}
.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--block {
display: block;
width: 100%;
}
.column__wrapper {
display: flex;
flex: 1 1 auto;
position: relative;
}
.icon-button {
display: inline-block;
padding: 0;
color: #404040;
border: none;
background: transparent;
cursor: pointer;
transition: color 100ms ease-in;
}
.icon-button:hover, .icon-button:active, .icon-button:focus {
color: #525252;
transition: color 200ms ease-out;
}
.icon-button.disabled {
color: #1f1f1f;
cursor: default;
}
.icon-button.active {
color: #00007f;
}
.icon-button::-moz-focus-inner {
border: 0;
}
.icon-button::-moz-focus-inner, .icon-button:focus, .icon-button:active {
outline: 0 !important;
}
.icon-button.inverted {
color: #404040;
}
.icon-button.inverted:hover, .icon-button.inverted:active, .icon-button.inverted:focus {
color: #2e2e2e;
}
.icon-button.inverted.disabled {
color: #525252;
}
.icon-button.inverted.active {
color: #00007f;
}
.icon-button.inverted.active.disabled {
color: #0000c1;
}
.icon-button.overlayed {
box-sizing: content-box;
background: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0.7);
border-radius: 4px;
padding: 2px;
}
.icon-button.overlayed:hover {
background: rgba(0, 0, 0, 0.9);
}
.text-icon-button {
color: #404040;
border: none;
background: transparent;
cursor: pointer;
font-weight: 600;
font-size: 11px;
padding: 0 3px;
line-height: 27px;
outline: 0;
transition: color 100ms ease-in;
}
.text-icon-button:hover, .text-icon-button:active, .text-icon-button:focus {
color: #2e2e2e;
transition: color 200ms ease-out;
}
.text-icon-button.disabled {
color: #737373;
cursor: default;
}
.text-icon-button.active {
color: #00007f;
}
.text-icon-button::-moz-focus-inner {
border: 0;
}
.text-icon-button::-moz-focus-inner, .text-icon-button:focus, .text-icon-button:active {
outline: 0 !important;
}
.dropdown-menu {
position: absolute;
transform-origin: 50% 0;
}
.invisible {
font-size: 0;
line-height: 0;
display: inline-block;
width: 0;
height: 0;
position: absolute;
}
.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 .compose-form__warning {
color: #282c37;
margin-bottom: 10px;
background: #9baec8;
box-shadow: 0 2px 6px rgba(0, 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) {
font-weight: 700;
}
.compose-form .compose-form__warning strong:lang(ko) {
font-weight: 700;
}
.compose-form .compose-form__warning strong:lang(zh-CN) {
font-weight: 700;
}
.compose-form .compose-form__warning strong:lang(zh-HK) {
font-weight: 700;
}
.compose-form .compose-form__warning strong:lang(zh-TW) {
font-weight: 700;
}
.compose-form .compose-form__warning a {
color: #404040;
font-weight: 500;
text-decoration: underline;
}
.compose-form .compose-form__warning a:hover, .compose-form .compose-form__warning a:active, .compose-form .compose-form__warning a:focus {
text-decoration: none;
}
.compose-form .compose-form__autosuggest-wrapper {
position: relative;
}
.compose-form .compose-form__autosuggest-wrapper .emoji-picker-dropdown {
position: absolute;
right: 5px;
top: 5px;
}
.compose-form .autosuggest-textarea,
.compose-form .spoiler-input {
position: relative;
}
.compose-form .spoiler-input {
height: 0;
transform-origin: bottom;
opacity: 0;
}
.compose-form .spoiler-input.spoiler-input--visible {
height: 47px;
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: #ffffff;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
}
.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;
}
@media screen and (max-width: 600px) {
.compose-form .autosuggest-textarea__textarea {
height: 100px !important;
resize: vertical;
}
}
.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, 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:hover, .compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:active, .compose-form .autosuggest-textarea__suggestions__item.selected {
background: #b9c8d5;
}
.compose-form .autosuggest-account,
.compose-form .autosuggest-emoji {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
line-height: 18px;
font-size: 14px;
}
.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: #404040;
}
.compose-form .compose-form__modifiers {
color: #282c37;
font-family: inherit;
font-size: 14px;
background: #ffffff;
}
.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, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
display: flex;
align-items: flex-start;
justify-content: space-between;
opacity: 0;
transition: opacity 0.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:hover, .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:focus, .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:active {
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, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent);
padding: 10px;
opacity: 0;
transition: opacity 0.1s ease;
}
.compose-form .compose-form__modifiers .compose-form__upload-description input {
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 input:focus {
color: #ffffff;
}
.compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder {
opacity: 0.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-position: center;
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;
}
.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 {
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__buttons-wrapper .character-counter__wrapper .character-counter {
cursor: default;
font-family: "mastodon-font-sans-serif", sans-serif;
font-size: 14px;
font-weight: 600;
color: #404040;
}
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter.character-counter--over {
color: #ff5050;
}
.compose-form .compose-form__publish {
display: flex;
justify-content: flex-end;
min-width: 0;
}
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
overflow: hidden;
padding-top: 10px;
}
.no-reduce-motion .spoiler-input {
transition: height 0.4s ease, opacity 0.4s ease;
}
.emojione {
font-size: inherit;
vertical-align: middle;
object-fit: contain;
margin: -0.2ex 0.15em 0.2ex;
width: 16px;
height: 16px;
}
.emojione img {
width: auto;
}
.reply-indicator {
border-radius: 4px;
margin-bottom: 10px;
background: #9baec8;
padding: 10px;
}
.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,
.reply-indicator__content {
font-size: 15px;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
overflow: hidden;
white-space: pre-wrap;
padding-top: 2px;
}
.status__content:focus,
.reply-indicator__content:focus {
outline: 0;
}
.status__content.status__content--with-spoiler,
.reply-indicator__content.status__content--with-spoiler {
white-space: normal;
}
.status__content.status__content--with-spoiler .status__content__text,
.reply-indicator__content.status__content--with-spoiler .status__content__text {
white-space: pre-wrap;
}
.status__content .emojione,
.reply-indicator__content .emojione {
width: 20px;
height: 20px;
margin: -3px 0 0;
}
.status__content p,
.reply-indicator__content p {
margin-bottom: 20px;
}
.status__content p:last-child,
.reply-indicator__content p:last-child {
margin-bottom: 0;
}
.status__content a,
.reply-indicator__content a {
color: #d9e1e8;
text-decoration: none;
}
.status__content a:hover,
.reply-indicator__content a:hover {
text-decoration: underline;
}
.status__content a:hover .fa,
.reply-indicator__content a:hover .fa {
color: #525252;
}
.status__content a.mention:hover,
.reply-indicator__content a.mention:hover {
text-decoration: none;
}
.status__content a.mention:hover span,
.reply-indicator__content a.mention:hover span {
text-decoration: underline;
}
.status__content a .fa,
.reply-indicator__content a .fa {
color: #404040;
}
.status__content .status__content__spoiler-link,
.reply-indicator__content .status__content__spoiler-link {
background: #404040;
}
.status__content .status__content__spoiler-link:hover,
.reply-indicator__content .status__content__spoiler-link:hover {
background: #525252;
text-decoration: none;
}
.status__content .status__content__spoiler-link::-moz-focus-inner,
.reply-indicator__content .status__content__spoiler-link::-moz-focus-inner {
border: 0;
}
.status__content .status__content__spoiler-link::-moz-focus-inner, .status__content .status__content__spoiler-link:focus, .status__content .status__content__spoiler-link:active,
.reply-indicator__content .status__content__spoiler-link::-moz-focus-inner,
.reply-indicator__content .status__content__spoiler-link:focus,
.reply-indicator__content .status__content__spoiler-link:active {
outline: 0 !important;
}
.status__content .status__content__text,
.reply-indicator__content .status__content__text {
display: none;
}
.status__content .status__content__text.status__content__text--visible,
.reply-indicator__content .status__content__text.status__content__text--visible {
display: block;
}
.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: #404040;
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 .status.status-direct {
background: #42485a;
}
.focusable:focus .status.status-direct.muted {
background: transparent;
}
.focusable:focus .detailed-status,
.focusable:focus .detailed-status__action-bar {
background: #393f4f;
}
.status {
padding: 8px 10px;
padding-left: 68px;
position: relative;
min-height: 48px;
border-bottom: 1px solid #393f4f;
cursor: default;
opacity: 1;
animation: fade 150ms linear;
}
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
.status {
padding-right: 26px;
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.status .video-player {
margin-top: 8px;
}
.status.status-direct {
background: #393f4f;
}
.status.light .status__relative-time {
color: #9baec8;
}
.status.light .status__display-name {
color: #282c37;
}
.status.light .display-name strong {
color: #282c37;
}
.status.light .display-name span {
color: #9baec8;
}
.status.light .status__content {
color: #282c37;
}
.status.light .status__content a {
color: #00007f;
}
.status.light .status__content a.status__content__spoiler-link {
color: #ffffff;
background: #9baec8;
}
.status.light .status__content a.status__content__spoiler-link:hover {
background: #b5c3d6;
}
.notification-favourite .status.status-direct {
background: transparent;
}
.notification-favourite .status.status-direct .icon-button.disabled {
color: #616161;
}
.status__relative-time {
color: #404040;
float: right;
font-size: 14px;
}
.status__display-name {
color: #404040;
}
.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;
}
.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 .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: #404040;
padding: 8px 0;
padding-bottom: 2px;
font-size: 14px;
position: relative;
}
.status__prepend .status__display-name strong {
color: #404040;
}
.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 {
float: left;
margin-right: 18px;
}
.status__action-bar-dropdown {
float: left;
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: #313543;
padding: 14px 10px;
}
.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 .video-player {
margin-top: 8px;
}
.detailed-status__meta {
margin-top: 15px;
color: #404040;
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: #404040;
}
.domain {
padding: 10px;
border-bottom: 1px solid #393f4f;
}
.domain .domain__domain-name {
flex: 1 1 auto;
display: block;
color: #ffffff;
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;
position: relative;
}
.account__avatar-inline {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
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-overlay {
border-radius: 4px;
background: transparent no-repeat;
background-position: 50%;
background-clip: padding-box;
width: 24px;
height: 24px;
background-size: 24px 24px;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
.account__relationship {
height: 18px;
padding: 10px;
white-space: nowrap;
}
.account__header {
flex: 0 0 auto;
background: #313543;
text-align: center;
background-size: cover;
background-position: center;
position: relative;
}
.account__header.inactive {
opacity: 0.5;
}
.account__header.inactive .account__header__avatar {
filter: grayscale(100%);
}
.account__header.inactive .account__header__username {
color: #d9e1e8;
}
.account__header > div {
background: rgba(49, 53, 67, 0.9);
padding: 20px 10px;
}
.account__header .account__header__content {
color: #d9e1e8;
}
.account__header .account__header__display-name {
color: #ffffff;
display: inline-block;
width: 100%;
font-size: 20px;
line-height: 27px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
.account__header .account__header__username {
color: #00007f;
font-size: 14px;
font-weight: 400;
display: block;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
}
.account__disclaimer {
padding: 10px;
border-top: 1px solid #393f4f;
color: #404040;
}
.account__disclaimer strong {
font-weight: 500;
}
.account__disclaimer strong:lang(ja) {
font-weight: 700;
}
.account__disclaimer strong:lang(ko) {
font-weight: 700;
}
.account__disclaimer strong:lang(zh-CN) {
font-weight: 700;
}
.account__disclaimer strong:lang(zh-HK) {
font-weight: 700;
}
.account__disclaimer strong:lang(zh-TW) {
font-weight: 700;
}
.account__disclaimer a {
font-weight: 500;
color: inherit;
text-decoration: underline;
}
.account__disclaimer a:hover, .account__disclaimer a:focus, .account__disclaimer a:active {
text-decoration: 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__display-name .emojione {
width: 25px;
height: 25px;
}
.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 {
flex: 0 1 calc(50% - 140px);
padding: 10px;
}
.account__action-bar-dropdown .icon-button {
vertical-align: middle;
}
.account__action-bar-dropdown .dropdown--active .dropdown__content.dropdown__right {
left: 6px;
right: initial;
}
.account__action-bar-dropdown .dropdown--active::after {
bottom: initial;
margin-left: 11px;
margin-top: -7px;
right: initial;
}
.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 80px;
border-right: 1px solid #393f4f;
padding: 10px 5px;
}
.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: #ffffff;
}
.account__action-bar__tab strong:lang(ja) {
font-weight: 700;
}
.account__action-bar__tab strong:lang(ko) {
font-weight: 700;
}
.account__action-bar__tab strong:lang(zh-CN) {
font-weight: 700;
}
.account__action-bar__tab strong:lang(zh-HK) {
font-weight: 700;
}
.account__action-bar__tab strong:lang(zh-TW) {
font-weight: 700;
}
.account__header__avatar {
background-size: 90px 90px;
display: block;
height: 90px;
margin: 0 auto 10px;
overflow: hidden;
width: 90px;
}
.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;
}
.status__display-name,
.status__relative-time,
.detailed-status__display-name,
.detailed-status__datetime,
.detailed-status__application,
.account__display-name {
text-decoration: none;
}
.status__display-name strong,
.account__display-name strong {
color: #ffffff;
}
.muted .emojione {
opacity: 0.5;
}
.status__display-name:hover strong,
.reply-indicator__display-name:hover strong,
.detailed-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__display-name {
color: #d9e1e8;
display: block;
line-height: 24px;
margin-bottom: 15px;
overflow: hidden;
}
.detailed-status__display-name strong,
.detailed-status__display-name span {
display: block;
text-overflow: ellipsis;
overflow: hidden;
}
.detailed-status__display-name strong {
font-size: 16px;
color: #ffffff;
}
.detailed-status__display-avatar {
float: left;
margin-right: 10px;
}
.status__avatar {
height: 48px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
.muted .status__content p,
.muted .status__content a {
color: #404040;
}
.muted .status__display-name strong {
color: #404040;
}
.muted .status__avatar {
opacity: 0.5;
}
.muted a.status__content__spoiler-link {
background: #404040;
color: #282c37;
}
.muted a.status__content__spoiler-link:hover {
background: #525252;
text-decoration: none;
}
.notification__message {
margin: 0 10px 0 68px;
padding: 8px 0 0;
cursor: default;
color: #9baec8;
font-size: 15px;
position: relative;
}
.notification__message .fa {
color: #00007f;
}
.notification__message > span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.notification__favourite-icon-wrapper {
left: -26px;
position: absolute;
}
.notification__favourite-icon-wrapper .star-icon {
color: #ca8f04;
}
.star-icon.active {
color: #ca8f04;
}
.notification__display-name {
color: inherit;
font-weight: 500;
text-decoration: none;
}
.notification__display-name:hover {
color: #ffffff;
text-decoration: underline;
}
.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;
}
.status__relative-time:hover,
.detailed-status__datetime:hover {
text-decoration: underline;
}
.image-loader {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.image-loader .image-loader__preview-canvas {
max-width: 100%;
max-height: 80%;
background: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/void.png") repeat;
object-fit: contain;
}
.image-loader.image-loader--loading .image-loader__preview-canvas {
filter: blur(2px);
}
.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;
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: scale(0, 1) translate(-100%, 0);
opacity: 0;
}
.navigation-bar .navigation-bar__actions .compose__action-bar .icon-button {
pointer-events: auto;
transform: scale(1, 1) translate(0, 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, 0.4);
}
.dropdown-menu ul {
list-style: none;
}
.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: -13px;
border-width: 5px 7px 0;
border-top-color: #d9e1e8;
}
.dropdown-menu__arrow.bottom {
top: -5px;
margin-left: -13px;
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:focus, .dropdown-menu__item a:hover, .dropdown-menu__item a:active {
background: #00007f;
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, 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: #00007f;
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;
}
@media screen and (min-width: 360px) {
.columns-area {
padding: 10px;
}
.react-swipeable-view-container .columns-area {
height: calc(100% - 20px) !important;
}
}
.react-swipeable-view-container,
.react-swipeable-view-container .columns-area,
.react-swipeable-view-container .drawer,
.react-swipeable-view-container .column {
height: 100%;
}
.react-swipeable-view-container > * {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.column {
width: 330px;
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.column > .scrollable {
background: #282c37;
}
.ui {
flex: 0 0 auto;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background: #191b22;
}
.drawer {
width: 300px;
box-sizing: border-box;
display: flex;
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: 360px) {
.tabs-bar {
margin: 10px;
margin-bottom: 0;
}
.getting-started__wrapper,
.getting-started__trends,
.search {
margin-bottom: 10px;
}
}
@media screen and (max-width: 630px) {
.column,
.drawer {
width: 100%;
padding: 0;
}
.columns-area {
flex-direction: column;
}
.search__input,
.autosuggest-textarea__textarea {
font-size: 16px;
}
}
@media screen and (min-width: 631px) {
.columns-area {
padding: 0;
}
.column,
.drawer {
flex: 0 0 auto;
padding: 10px;
padding-left: 5px;
padding-right: 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;
}
}
.drawer__pager {
box-sizing: border-box;
padding: 0;
flex-grow: 1;
position: relative;
overflow: hidden;
display: flex;
}
.drawer__inner {
position: absolute;
top: 0;
left: 0;
background: #444b5d;
box-sizing: border-box;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
}
.drawer__inner.darker {
background: #282c37;
}
.drawer__inner__mastodon {
background: #444b5d url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="%23282C37"/></svg>') no-repeat bottom/100% auto;
flex: 1;
min-height: 47px;
}
.drawer__inner__mastodon > img {
display: block;
object-fit: contain;
object-position: bottom left;
width: 100%;
height: 100%;
pointer-events: none;
user-drag: none;
user-select: none;
}
.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 100ms ease-in;
}
.drawer__header a:hover {
background: #2e3340;
transition: background 200ms ease-out;
}
.tabs-bar {
display: flex;
background: #393f4f;
flex: 0 0 auto;
overflow-y: auto;
}
.tabs-bar__link {
display: block;
flex: 1 1 auto;
padding: 15px 10px;
color: #ffffff;
text-decoration: none;
text-align: center;
font-size: 14px;
font-weight: 500;
border-bottom: 2px solid #393f4f;
transition: all 50ms linear;
}
.tabs-bar__link .fa {
font-weight: 400;
font-size: 16px;
}
.tabs-bar__link.active {
border-bottom: 2px solid #00007f;
color: #00007f;
}
@media screen and (min-width: 631px) {
.tabs-bar__link:hover, .tabs-bar__link:focus, .tabs-bar__link:active {
background: #464d60;
}
}
.tabs-bar__link span {
margin-left: 5px;
display: none;
}
@media screen and (min-width: 600px) {
.tabs-bar__link span {
display: inline;
}
}
@media screen and (min-width: 631px) {
.tabs-bar {
display: none;
}
}
.scrollable {
overflow-y: scroll;
overflow-x: hidden;
flex: 1 1 auto;
-webkit-overflow-scrolling: touch;
will-change: transform;
}
.scrollable.optionally-scrollable {
overflow-y: auto;
}
@supports (display: grid) {
.scrollable {
contain: strict;
}
}
@supports (display: grid) {
.scrollable.fullscreen {
contain: none;
}
}
.column-back-button {
background: #313543;
color: #00007f;
cursor: pointer;
flex: 0 0 auto;
font-size: 16px;
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: #00007f;
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;
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: 0.5;
transition: opacity 0.25s;
}
.react-toggle-track {
width: 50px;
height: 24px;
padding: 0;
border-radius: 30px;
background-color: #282c37;
transition: all 0.2s ease;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #131419;
}
.react-toggle--checked .react-toggle-track {
background-color: #00007f;
}
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: #0000b2;
}
.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 0.25s ease;
}
.react-toggle--checked .react-toggle-track-check {
opacity: 1;
transition: opacity 0.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;
opacity: 1;
transition: opacity 0.25s ease;
}
.react-toggle--checked .react-toggle-track-x {
opacity: 0;
}
.react-toggle-thumb {
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
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 0.25s ease;
}
.react-toggle--checked .react-toggle-thumb {
left: 27px;
border-color: #00007f;
}
.column-link {
background: #393f4f;
color: #ffffff;
display: block;
font-size: 16px;
padding: 15px;
text-decoration: none;
}
.column-link:hover {
background: #404657;
}
.column-link__icon {
display: inline-block;
margin-right: 5px;
}
.column-link__badge {
display: inline-block;
border-radius: 4px;
font-size: 12px;
line-height: 19px;
font-weight: 500;
background: #282c37;
padding: 4px 8px;
margin: -6px 10px;
}
.column-subheading {
background: #282c37;
color: #404040;
padding: 8px 20px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
cursor: default;
}
.getting-started__wrapper,
.getting-started,
.flex-spacer {
background: #282c37;
}
.getting-started__wrapper {
flex: 0 0 auto;
}
.flex-spacer {
flex: 1 1 auto;
}
.getting-started {
color: #404040;
}
.getting-started p {
color: #404040;
font-size: 13px;
margin-bottom: 20px;
}
.getting-started p a {
color: #404040;
text-decoration: underline;
}
.getting-started a {
text-decoration: none;
color: #9baec8;
}
.getting-started a:hover, .getting-started a:focus, .getting-started a:active {
text-decoration: underline;
}
.getting-started__footer {
flex: 0 0 auto;
padding: 10px;
padding-top: 20px;
}
.getting-started__footer ul {
margin-bottom: 10px;
}
.getting-started__footer ul li {
display: inline;
}
.getting-started__trends {
background: #282c37;
flex: 0 1 auto;
}
@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__scrollable {
max-height: 100%;
overflow-y: auto;
}
.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 {
color: #9baec8;
background: transparent;
border: none;
border-bottom: 2px solid #9baec8;
box-sizing: border-box;
display: block;
font-family: inherit;
margin-bottom: 10px;
padding: 7px 0;
width: 100%;
}
.setting-text:focus, .setting-text:active {
color: #ffffff;
border-bottom-color: #00007f;
}
@media screen and (max-width: 600px) {
.setting-text {
font-size: 16px;
}
}
.no-reduce-motion button.icon-button i.fa-retweet {
background-position: 0 0;
height: 19px;
transition: background-position 0.9s steps(10);
transition-duration: 0s;
vertical-align: middle;
width: 22px;
}
.no-reduce-motion button.icon-button i.fa-retweet::before {
display: none !important;
}
.no-reduce-motion button.icon-button.active i.fa-retweet {
transition-duration: 0.9s;
background-position: 0 100%;
}
.reduce-motion button.icon-button i.fa-retweet {
color: #404040;
transition: color 100ms ease-in;
}
.reduce-motion button.icon-button.active i.fa-retweet {
color: #00007f;
}
.status-card {
display: flex;
font-size: 14px;
border: 1px solid #393f4f;
border-radius: 4px;
color: #404040;
margin-top: 14px;
text-decoration: none;
overflow: hidden;
}
.status-card__actions {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
.status-card__actions > div {
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
padding: 12px 9px;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.status-card__actions button,
.status-card__actions a {
display: inline;
color: #ffffff;
background: transparent;
border: 0;
padding: 0 5px;
text-decoration: none;
opacity: 0.6;
font-size: 18px;
line-height: 18px;
}
.status-card__actions button:hover, .status-card__actions button:active, .status-card__actions button:focus,
.status-card__actions a:hover,
.status-card__actions a:active,
.status-card__actions a:focus {
opacity: 1;
}
.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;
}
.status-card__image {
flex: 0 0 100px;
background: #393f4f;
position: relative;
}
.status-card.horizontal {
display: block;
}
.status-card.horizontal .status-card__image {
width: 100%;
}
.status-card.horizontal .status-card__image-image {
border-radius: 4px 4px 0 0;
}
.status-card.horizontal .status-card__title {
white-space: inherit;
}
.status-card__image-image {
border-radius: 4px 0 0 4px;
display: block;
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: center center;
}
.load-more {
display: block;
color: #404040;
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;
}
.regeneration-indicator {
text-align: center;
font-size: 16px;
font-weight: 500;
color: #404040;
background: #282c37;
cursor: default;
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: 20px;
}
.regeneration-indicator > div {
width: 100%;
background: transparent;
padding-top: 0;
}
.regeneration-indicator__figure {
background: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/elephant_ui_working.svg") no-repeat center 0;
width: 100%;
height: 160px;
background-size: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.regeneration-indicator.missing-indicator {
padding-top: 68px;
}
.regeneration-indicator.missing-indicator .regeneration-indicator__figure {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/elephant_ui_disappointed.svg");
}
.regeneration-indicator__label {
margin-top: 200px;
}
.regeneration-indicator__label strong {
display: block;
margin-bottom: 10px;
color: #404040;
}
.regeneration-indicator__label span {
font-size: 15px;
font-weight: 400;
}
.column-header__wrapper {
position: relative;
flex: 0 0 auto;
}
.column-header__wrapper.active::before {
display: block;
content: "";
position: absolute;
top: 35px;
left: 0;
right: 0;
margin: 0 auto;
width: 60%;
pointer-events: none;
height: 28px;
z-index: 1;
background: radial-gradient(ellipse, rgba(0, 0, 127, 0.23) 0%, rgba(0, 0, 127, 0) 60%);
}
.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: none;
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: #00007f;
}
.column-header.active {
box-shadow: 0 1px 0 rgba(0, 0, 127, 0.3);
}
.column-header.active .column-header__icon {
color: #00007f;
text-shadow: 0 0 10px rgba(0, 0, 127, 0.4);
}
.column-header:focus, .column-header:active {
outline: 0;
}
.column-header__buttons {
height: 48px;
display: flex;
}
.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 {
color: #ffffff;
background: #393f4f;
}
.column-header__button.active:hover {
color: #ffffff;
background: #393f4f;
}
.column-header__collapsible {
max-height: 70vh;
overflow: hidden;
overflow-y: auto;
color: #9baec8;
transition: max-height 150ms ease-in-out, opacity 300ms linear;
opacity: 1;
}
.column-header__collapsible.collapsed {
max-height: 0;
opacity: 0.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__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__icon {
display: inline-block;
margin-right: 5px;
}
.loading-indicator {
color: #404040;
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;
margin-left: 50%;
transform: translateX(-50%);
margin: 82px 0 0 50%;
white-space: nowrap;
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.loading-indicator__figure {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
box-sizing: border-box;
border: 0 solid #606984;
border-radius: 50%;
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@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;
}
100% {
width: 42px;
height: 42px;
border-width: 0;
opacity: 0;
background-color: transparent;
}
}
@keyframes loader-label {
0% {
opacity: 0.25;
}
30% {
opacity: 1;
}
100% {
opacity: 0.25;
}
}
.video-error-cover {
align-items: center;
background: #000000;
color: #ffffff;
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: #000000;
color: #9baec8;
border: 0;
padding: 0;
width: 100%;
height: 100%;
border-radius: 4px;
appearance: none;
}
.media-spoiler:hover, .media-spoiler:active, .media-spoiler:focus {
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 {
display: none;
left: 4px;
position: absolute;
text-shadow: 0 1px 1px #000000, 1px 0 1px #000000;
top: 4px;
z-index: 100;
}
.spoiler-button.spoiler-button--visible {
display: block;
}
.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__row .text-btn {
margin-bottom: 15px;
}
.account--follows-info {
color: #ffffff;
position: absolute;
top: 10px;
left: 10px;
opacity: 0.7;
display: inline-block;
vertical-align: top;
background-color: rgba(0, 0, 0, 0.4);
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
padding: 4px;
border-radius: 4px;
}
.account--muting-info {
color: #ffffff;
position: absolute;
top: 40px;
left: 10px;
opacity: 0.7;
display: inline-block;
vertical-align: top;
background-color: rgba(0, 0, 0, 0.4);
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
padding: 4px;
border-radius: 4px;
}
.account--action-button {
position: absolute;
top: 10px;
right: 20px;
}
.setting-toggle {
display: block;
line-height: 24px;
}
.setting-toggle__label,
.setting-meta__label {
color: #9baec8;
display: inline-block;
margin-bottom: 14px;
margin-left: 8px;
vertical-align: middle;
}
.setting-meta__label {
float: right;
}
.empty-column-indicator,
.error-column {
color: #404040;
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 {
contain: strict;
}
}
.empty-column-indicator a,
.error-column a {
color: #00007f;
text-decoration: none;
}
.empty-column-indicator a:hover,
.error-column a:hover {
text-decoration: underline;
}
.error-column {
flex-direction: column;
}
@keyframes heartbeat {
from {
transform: scale(1);
animation-timing-function: ease-out;
}
10% {
transform: scale(0.91);
animation-timing-function: ease-in;
}
17% {
transform: scale(0.98);
animation-timing-function: ease-out;
}
33% {
transform: scale(0.87);
animation-timing-function: ease-in;
}
45% {
transform: scale(1);
animation-timing-function: ease-out;
}
}
.no-reduce-motion .pulse-loading {
transform-origin: center center;
animation: heartbeat 1.5s ease-in-out infinite both;
}
@keyframes shake-bottom {
0%, 100% {
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%;
animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
}
.emoji-picker-dropdown__menu {
background: #ffffff;
position: absolute;
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
border-radius: 4px;
margin-top: 5px;
}
.emoji-picker-dropdown__menu .emoji-mart-scroll {
transition: opacity 200ms ease;
}
.emoji-picker-dropdown__menu.selecting .emoji-mart-scroll {
opacity: 0.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: #ffffff;
border-radius: 4px;
box-shadow: 1px 2px 6px rgba(0, 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:hover, .emoji-picker-dropdown__modifiers__menu button:focus, .emoji-picker-dropdown__modifiers__menu button:active {
background: rgba(217, 225, 232, 0.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, 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, 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 #404040;
border-radius: 4px;
}
.upload-progress {
padding: 10px;
color: #404040;
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: #404040;
position: relative;
margin-top: 5px;
}
.upload-progress__tracker {
position: absolute;
left: 0;
top: 0;
height: 6px;
background: #00007f;
border-radius: 6px;
}
.emoji-button {
display: block;
font-size: 24px;
line-height: 24px;
margin-left: 2px;
width: 24px;
outline: 0;
cursor: pointer;
}
.emoji-button:active, .emoji-button:focus {
outline: 0 !important;
}
.emoji-button img {
filter: grayscale(100%);
opacity: 0.8;
display: block;
margin: 0;
width: 22px;
height: 22px;
margin-top: 2px;
}
.emoji-button:hover img, .emoji-button:active img, .emoji-button:focus img {
opacity: 1;
filter: none;
}
.dropdown--active .emoji-button img {
opacity: 1;
filter: none;
}
.privacy-dropdown__dropdown {
position: absolute;
background: #ffffff;
box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4);
border-radius: 4px;
margin-left: 40px;
overflow: hidden;
transform-origin: 50% 0;
}
.privacy-dropdown__option {
color: #282c37;
padding: 10px;
cursor: pointer;
display: flex;
}
.privacy-dropdown__option:hover, .privacy-dropdown__option.active {
background: #00007f;
color: #ffffff;
outline: 0;
}
.privacy-dropdown__option:hover .privacy-dropdown__option__content, .privacy-dropdown__option.active .privacy-dropdown__option__content {
color: #ffffff;
}
.privacy-dropdown__option:hover .privacy-dropdown__option__content strong, .privacy-dropdown__option.active .privacy-dropdown__option__content strong {
color: #ffffff;
}
.privacy-dropdown__option.active:hover {
background: #000093;
}
.privacy-dropdown__option__icon {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.privacy-dropdown__option__content {
flex: 1 1 auto;
color: #404040;
}
.privacy-dropdown__option__content strong {
font-weight: 500;
display: block;
color: #282c37;
}
.privacy-dropdown__option__content strong:lang(ja) {
font-weight: 700;
}
.privacy-dropdown__option__content strong:lang(ko) {
font-weight: 700;
}
.privacy-dropdown__option__content strong:lang(zh-CN) {
font-weight: 700;
}
.privacy-dropdown__option__content strong:lang(zh-HK) {
font-weight: 700;
}
.privacy-dropdown__option__content strong:lang(zh-TW) {
font-weight: 700;
}
.privacy-dropdown.active .privacy-dropdown__value {
background: #ffffff;
border-radius: 4px 4px 0 0;
box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.1);
}
.privacy-dropdown.active .privacy-dropdown__value .icon-button {
transition: none;
}
.privacy-dropdown.active .privacy-dropdown__value.active {
background: #00007f;
}
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
color: #ffffff;
}
.privacy-dropdown.active .privacy-dropdown__dropdown {
display: block;
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
}
.advanced-options-dropdown {
position: relative;
}
.advanced-options-dropdown__dropdown {
display: none;
position: absolute;
left: 0;
top: 27px;
width: 210px;
background: #ffffff;
border-radius: 0 4px 4px;
z-index: 2;
overflow: hidden;
}
.advanced-options-dropdown__option {
color: #282c37;
padding: 10px;
cursor: pointer;
display: flex;
}
.advanced-options-dropdown__option:hover, .advanced-options-dropdown__option.active {
background: #00007f;
color: #ffffff;
}
.advanced-options-dropdown__option:hover .advanced-options-dropdown__option__content, .advanced-options-dropdown__option.active .advanced-options-dropdown__option__content {
color: #ffffff;
}
.advanced-options-dropdown__option:hover .advanced-options-dropdown__option__content strong, .advanced-options-dropdown__option.active .advanced-options-dropdown__option__content strong {
color: #ffffff;
}
.advanced-options-dropdown__option.active:hover {
background: #000093;
}
.advanced-options-dropdown__option__toggle {
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.advanced-options-dropdown__option__content {
flex: 1 1 auto;
color: #536f96;
}
.advanced-options-dropdown__option__content strong {
font-weight: 500;
display: block;
color: #282c37;
}
.advanced-options-dropdown.open .advanced-options-dropdown__value {
background: #ffffff;
border-radius: 4px 4px 0 0;
box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.1);
}
.advanced-options-dropdown.open .advanced-options-dropdown__dropdown {
display: block;
box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
}
.search {
position: relative;
}
.search__input {
outline: 0;
box-sizing: border-box;
display: block;
width: 100%;
border: none;
padding: 10px;
padding-right: 30px;
font-family: inherit;
background: #282c37;
color: #9baec8;
font-size: 14px;
margin: 0;
}
.search__input::-moz-focus-inner {
border: 0;
}
.search__input::-moz-focus-inner, .search__input:focus, .search__input:active {
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: 10px;
right: 10px;
z-index: 2;
display: inline-block;
opacity: 0;
transition: all 100ms linear;
font-size: 18px;
width: 18px;
height: 18px;
color: #d9e1e8;
cursor: default;
pointer-events: none;
}
.search__icon .fa.active {
pointer-events: auto;
opacity: 0.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: 11px;
transform: rotate(0deg);
color: #404040;
cursor: pointer;
}
.search__icon .fa-times-circle.active {
transform: rotate(90deg);
}
.search__icon .fa-times-circle:hover {
color: #525252;
}
.search-results__header {
color: #404040;
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: #404040;
}
.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:hover, .search-results__hashtag:active, .search-results__hashtag:focus {
color: #e6ebf0;
text-decoration: underline;
}
.modal-root {
position: relative;
transition: opacity 0.3s linear;
will-change: opacity;
z-index: 9999;
}
.modal-root__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 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;
user-select: none;
}
.modal-root__modal {
pointer-events: auto;
display: flex;
z-index: 9999;
}
.video-modal {
max-width: 100vw;
max-height: 100vh;
position: relative;
}
.media-modal {
width: 100%;
height: 100%;
position: relative;
}
.media-modal .extended-video-player {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.media-modal .extended-video-player video {
max-width: 100%;
max-height: 80%;
}
.media-modal__closer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.media-modal__navigation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
transition: opacity 0.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: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
border: 0;
color: #ffffff;
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--left {
left: 0;
}
.media-modal__nav--right {
right: 0;
}
.media-modal__pagination {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
pointer-events: none;
}
.media-modal__page-dot {
display: inline-block;
}
.media-modal__button {
background-color: #ffffff;
height: 12px;
width: 12px;
border-radius: 6px;
margin: 10px;
padding: 0;
border: 0;
font-size: 0;
}
.media-modal__button--active {
background-color: #00007f;
}
.media-modal__close {
position: absolute;
right: 8px;
top: 8px;
z-index: 100;
}
.onboarding-modal,
.error-modal,
.embed-modal {
background: #d9e1e8;
color: #282c37;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.onboarding-modal__pager {
height: 80vh;
width: 80vw;
max-width: 520px;
max-height: 470px;
}
.onboarding-modal__pager .react-swipeable-view-container > div {
width: 100%;
height: 100%;
box-sizing: border-box;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
user-select: text;
}
.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;
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
opacity: 0;
user-select: text;
}
.error-modal__body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
@media screen and (max-width: 550px) {
.onboarding-modal {
width: 100%;
height: 100%;
border-radius: 0;
}
.onboarding-modal__pager {
width: 100%;
height: auto;
max-width: none;
max-height: none;
flex: 1 1 auto;
}
}
.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
background: #c0cdd9;
display: flex;
padding: 25px;
}
.onboarding-modal__paginator > div,
.error-modal__footer > div {
min-width: 33px;
}
.onboarding-modal__paginator .onboarding-modal__nav,
.onboarding-modal__paginator .error-modal__nav,
.error-modal__footer .onboarding-modal__nav,
.error-modal__footer .error-modal__nav {
color: #404040;
border: 0;
font-size: 14px;
font-weight: 500;
padding: 10px 25px;
line-height: inherit;
height: auto;
margin: -10px;
border-radius: 4px;
background-color: transparent;
}
.onboarding-modal__paginator .onboarding-modal__nav:hover, .onboarding-modal__paginator .onboarding-modal__nav:focus, .onboarding-modal__paginator .onboarding-modal__nav:active,
.onboarding-modal__paginator .error-modal__nav:hover,
.onboarding-modal__paginator .error-modal__nav:focus,
.onboarding-modal__paginator .error-modal__nav:active,
.error-modal__footer .onboarding-modal__nav:hover,
.error-modal__footer .onboarding-modal__nav:focus,
.error-modal__footer .onboarding-modal__nav:active,
.error-modal__footer .error-modal__nav:hover,
.error-modal__footer .error-modal__nav:focus,
.error-modal__footer .error-modal__nav:active {
color: #363636;
background-color: #a6b9c9;
}
.onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__done,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__next,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__done,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__next,
.error-modal__footer .error-modal__nav.onboarding-modal__done,
.error-modal__footer .error-modal__nav.onboarding-modal__next {
color: #282c37;
}
.onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:hover, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:focus, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:active, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:hover, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:focus, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:active,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:hover,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:focus,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:active,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:hover,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:focus,
.onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:active,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__done:hover,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__done:focus,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__done:active,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__next:hover,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__next:focus,
.error-modal__footer .onboarding-modal__nav.onboarding-modal__next:active,
.error-modal__footer .error-modal__nav.onboarding-modal__done:hover,
.error-modal__footer .error-modal__nav.onboarding-modal__done:focus,
.error-modal__footer .error-modal__nav.onboarding-modal__done:active,
.error-modal__footer .error-modal__nav.onboarding-modal__next:hover,
.error-modal__footer .error-modal__nav.onboarding-modal__next:focus,
.error-modal__footer .error-modal__nav.onboarding-modal__next:active {
color: #313543;
}
.error-modal__footer {
justify-content: center;
}
.onboarding-modal__dots {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.onboarding-modal__dot {
width: 14px;
height: 14px;
border-radius: 14px;
background: #a6b9c9;
margin: 0 3px;
cursor: pointer;
}
.onboarding-modal__dot:hover {
background: #a0b4c5;
}
.onboarding-modal__dot.active {
cursor: default;
background: #8da5ba;
}
.onboarding-modal__page__wrapper {
pointer-events: none;
padding: 25px;
padding-bottom: 0;
}
.onboarding-modal__page__wrapper.onboarding-modal__page__wrapper--active {
pointer-events: auto;
}
.onboarding-modal__page {
cursor: default;
line-height: 21px;
}
.onboarding-modal__page h1 {
font-size: 18px;
font-weight: 500;
color: #282c37;
margin-bottom: 20px;
}
.onboarding-modal__page a {
color: #00007f;
}
.onboarding-modal__page a:hover, .onboarding-modal__page a:focus, .onboarding-modal__page a:active {
color: #000093;
}
.onboarding-modal__page .navigation-bar a {
color: inherit;
}
.onboarding-modal__page p {
font-size: 16px;
color: #404040;
margin-top: 10px;
margin-bottom: 10px;
}
.onboarding-modal__page p:last-child {
margin-bottom: 0;
}
.onboarding-modal__page p strong {
font-weight: 500;
background: #282c37;
color: #d9e1e8;
border-radius: 4px;
font-size: 14px;
padding: 3px 6px;
}
.onboarding-modal__page p strong:lang(ja) {
font-weight: 700;
}
.onboarding-modal__page p strong:lang(ko) {
font-weight: 700;
}
.onboarding-modal__page p strong:lang(zh-CN) {
font-weight: 700;
}
.onboarding-modal__page p strong:lang(zh-HK) {
font-weight: 700;
}
.onboarding-modal__page p strong:lang(zh-TW) {
font-weight: 700;
}
.onboarding-modal__page__wrapper-0 {
background: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/elephant_ui_greeting.svg") no-repeat left bottom/auto 250px;
height: 100%;
padding: 0;
}
.onboarding-modal__page-one__lead {
padding: 65px;
padding-top: 45px;
padding-bottom: 0;
margin-bottom: 10px;
}
.onboarding-modal__page-one__lead h1 {
font-size: 26px;
line-height: 36px;
margin-bottom: 8px;
}
.onboarding-modal__page-one__lead p {
margin-bottom: 0;
}
.onboarding-modal__page-one__extra {
padding-right: 65px;
padding-left: 185px;
text-align: 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;
}
.onboarding-modal__page-two p,
.onboarding-modal__page-three p,
.onboarding-modal__page-four p,
.onboarding-modal__page-five p {
text-align: left;
}
.onboarding-modal__page-two .figure,
.onboarding-modal__page-three .figure,
.onboarding-modal__page-four .figure,
.onboarding-modal__page-five .figure {
background: #17191f;
color: #d9e1e8;
margin-bottom: 20px;
border-radius: 4px;
padding: 10px;
text-align: center;
font-size: 14px;
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
}
.onboarding-modal__page-two .figure .onboarding-modal__image,
.onboarding-modal__page-three .figure .onboarding-modal__image,
.onboarding-modal__page-four .figure .onboarding-modal__image,
.onboarding-modal__page-five .figure .onboarding-modal__image {
border-radius: 4px;
margin-bottom: 10px;
}
.onboarding-modal__page-two .figure.non-interactive,
.onboarding-modal__page-three .figure.non-interactive,
.onboarding-modal__page-four .figure.non-interactive,
.onboarding-modal__page-five .figure.non-interactive {
pointer-events: none;
text-align: left;
}
.onboarding-modal__page-four__columns .row {
display: flex;
margin-bottom: 20px;
}
.onboarding-modal__page-four__columns .row > div {
flex: 1 1 0;
margin: 0 10px;
}
.onboarding-modal__page-four__columns .row > div:first-child {
margin-left: 0;
}
.onboarding-modal__page-four__columns .row > div:last-child {
margin-right: 0;
}
.onboarding-modal__page-four__columns .row > div p {
text-align: center;
}
.onboarding-modal__page-four__columns .row:last-child {
margin-bottom: 0;
}
.onboarding-modal__page-four__columns .column-header {
color: #ffffff;
}
@media screen and (max-width: 320px) and (max-height: 600px) {
.onboarding-modal__page p {
font-size: 14px;
line-height: 20px;
}
.onboarding-modal__page-two .figure,
.onboarding-modal__page-three .figure,
.onboarding-modal__page-four .figure,
.onboarding-modal__page-five .figure {
font-size: 12px;
margin-bottom: 10px;
}
.onboarding-modal__page-four__columns .row {
margin-bottom: 10px;
}
.onboarding-modal__page-four__columns .column-header {
padding: 5px;
font-size: 12px;
}
}
.onboard-sliders {
display: inline-block;
max-width: 30px;
max-height: auto;
margin-left: 10px;
}
.boost-modal, .doodle-modal,
.confirmation-modal,
.report-modal,
.actions-modal,
.mute-modal {
background: #f2f5f7;
color: #282c37;
border-radius: 8px;
overflow: hidden;
max-width: 90vw;
width: 480px;
position: relative;
flex-direction: column;
}
.boost-modal .status__display-name, .doodle-modal .status__display-name,
.confirmation-modal .status__display-name,
.report-modal .status__display-name,
.actions-modal .status__display-name,
.mute-modal .status__display-name {
display: block;
max-width: 100%;
padding-right: 25px;
}
.boost-modal .status__avatar, .doodle-modal .status__avatar,
.confirmation-modal .status__avatar,
.report-modal .status__avatar,
.actions-modal .status__avatar,
.mute-modal .status__avatar {
height: 28px;
left: 10px;
position: absolute;
top: 10px;
width: 48px;
}
.boost-modal .status__content__spoiler-link, .doodle-modal .status__content__spoiler-link,
.confirmation-modal .status__content__spoiler-link,
.report-modal .status__content__spoiler-link,
.actions-modal .status__content__spoiler-link,
.mute-modal .status__content__spoiler-link {
color: #f2f5f7;
}
.actions-modal .status {
background: #ffffff;
border-bottom-color: #d9e1e8;
padding-top: 10px;
padding-bottom: 10px;
}
.actions-modal .dropdown-menu__separator {
border-bottom-color: #d9e1e8;
}
.boost-modal__container {
overflow-x: scroll;
padding: 10px;
}
.boost-modal__container .status {
user-select: text;
border-bottom: 0;
}
.boost-modal__action-bar, .doodle-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar {
display: flex;
justify-content: space-between;
background: #d9e1e8;
padding: 10px;
line-height: 36px;
}
.boost-modal__action-bar > div, .doodle-modal__action-bar > div,
.confirmation-modal__action-bar > div,
.mute-modal__action-bar > div {
flex: 1 1 auto;
text-align: right;
color: #404040;
padding-right: 10px;
}
.boost-modal__action-bar .button, .doodle-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;
}
.confirmation-modal {
max-width: 85vw;
}
@media screen and (min-width: 480px) {
.confirmation-modal {
max-width: 380px;
}
}
.mute-modal {
line-height: 24px;
}
.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__statuses,
.report-modal__comment {
box-sizing: border-box;
width: 50%;
}
@media screen and (max-width: 480px) {
.report-modal__statuses,
.report-modal__comment {
width: 100%;
}
}
.report-modal__statuses {
flex: 1 1 auto;
min-height: 20vh;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
}
.report-modal__statuses .status__content a {
color: #00007f;
}
@media screen and (max-width: 480px) {
.report-modal__statuses {
max-height: 10vh;
}
}
.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%;
margin: 0;
color: #282c37;
background: #ffffff;
padding: 10px;
font-family: inherit;
font-size: 14px;
resize: vertical;
border: 0;
outline: 0;
border-radius: 4px;
border: 1px solid #d9e1e8;
margin-bottom: 20px;
}
.report-modal__comment .setting-text:focus {
border: 1px solid #c0cdd9;
}
.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;
}
.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:hover,
.actions-modal ul li:not(:empty) a:hover 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 {
background: #00007f;
color: #ffffff;
}
.actions-modal ul li:not(:empty) a button:first-child {
margin-right: 10px;
}
.confirmation-modal__action-bar .confirmation-modal__cancel-button,
.confirmation-modal__action-bar .mute-modal__cancel-button,
.mute-modal__action-bar .confirmation-modal__cancel-button,
.mute-modal__action-bar .mute-modal__cancel-button {
background-color: transparent;
color: #404040;
font-size: 14px;
font-weight: 500;
}
.confirmation-modal__action-bar .confirmation-modal__cancel-button:hover, .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus, .confirmation-modal__action-bar .confirmation-modal__cancel-button:active,
.confirmation-modal__action-bar .mute-modal__cancel-button:hover,
.confirmation-modal__action-bar .mute-modal__cancel-button:focus,
.confirmation-modal__action-bar .mute-modal__cancel-button:active,
.mute-modal__action-bar .confirmation-modal__cancel-button:hover,
.mute-modal__action-bar .confirmation-modal__cancel-button:focus,
.mute-modal__action-bar .confirmation-modal__cancel-button:active,
.mute-modal__action-bar .mute-modal__cancel-button:hover,
.mute-modal__action-bar .mute-modal__cancel-button:focus,
.mute-modal__action-bar .mute-modal__cancel-button:active {
color: #363636;
}
.confirmation-modal__container,
.mute-modal__container,
.report-modal__target {
padding: 30px;
font-size: 16px;
text-align: center;
}
.confirmation-modal__container strong,
.mute-modal__container strong,
.report-modal__target strong {
font-weight: 500;
}
.confirmation-modal__container strong:lang(ja),
.mute-modal__container strong:lang(ja),
.report-modal__target strong:lang(ja) {
font-weight: 700;
}
.confirmation-modal__container strong:lang(ko),
.mute-modal__container strong:lang(ko),
.report-modal__target strong:lang(ko) {
font-weight: 700;
}
.confirmation-modal__container strong:lang(zh-CN),
.mute-modal__container strong:lang(zh-CN),
.report-modal__target strong:lang(zh-CN) {
font-weight: 700;
}
.confirmation-modal__container strong:lang(zh-HK),
.mute-modal__container strong:lang(zh-HK),
.report-modal__target strong:lang(zh-HK) {
font-weight: 700;
}
.confirmation-modal__container strong:lang(zh-TW),
.mute-modal__container strong:lang(zh-TW),
.report-modal__target strong:lang(zh-TW) {
font-weight: 700;
}
.report-modal__target {
padding: 20px;
}
.report-modal__target .media-modal__close {
top: 19px;
right: 15px;
}
.loading-bar {
background-color: #00007f;
height: 3px;
position: absolute;
top: 0;
left: 0;
}
.media-gallery__gifv__label {
display: block;
position: absolute;
color: #ffffff;
background: rgba(0, 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: 0.9;
transition: opacity 0.1s ease;
}
.media-gallery__gifv.autoplay .media-gallery__gifv__label {
display: none;
}
.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: #404040;
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;
padding-left: 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: #404040;
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: #404040;
}
/* Media Gallery */
.media-gallery {
box-sizing: border-box;
margin-top: 8px;
overflow: hidden;
border-radius: 4px;
position: relative;
width: 100%;
}
.media-gallery__item {
border: none;
box-sizing: border-box;
display: block;
float: left;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.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;
line-height: 0;
}
.media-gallery__item-thumbnail,
.media-gallery__item-thumbnail img {
height: 100%;
width: 100%;
}
.media-gallery__item-thumbnail img {
object-fit: cover;
}
.media-gallery__gifv {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.media-gallery__item-gifv-thumbnail {
cursor: zoom-in;
height: 100%;
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);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
}
/* End Media Gallery */
/* Status Video Player */
.status__video-player {
background: #000000;
box-sizing: border-box;
cursor: default;
/* May not be needed */
margin-top: 8px;
overflow: hidden;
position: relative;
}
.status__video-player-video {
height: 100%;
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
}
.status__video-player-expand,
.status__video-player-mute {
color: #ffffff;
opacity: 0.8;
position: absolute;
right: 4px;
text-shadow: 0 1px 1px #000000, 1px 0 1px #000000;
}
.status__video-player-spoiler {
display: none;
color: #ffffff;
left: 4px;
position: absolute;
text-shadow: 0 1px 1px #000000, 1px 0 1px #000000;
top: 4px;
z-index: 100;
}
.status__video-player-spoiler.status__video-player-spoiler--visible {
display: block;
}
.status__video-player-expand {
bottom: 4px;
z-index: 100;
}
.status__video-player-mute {
top: 4px;
z-index: 5;
}
.video-player {
overflow: hidden;
position: relative;
background: #000000;
max-width: 100%;
border-radius: 4px;
}
.video-player:focus {
outline: 0;
}
.video-player video {
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;
}
.video-player.inline video {
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, 0.85) 0, rgba(0, 0, 0, 0.45) 60%, transparent);
padding: 0 15px;
opacity: 0;
transition: opacity 0.1s ease;
}
.video-player__controls.active {
opacity: 1;
}
.video-player.inactive video,
.video-player.inactive .video-player__controls {
visibility: hidden;
}
.video-player__spoiler {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
border: 0;
background: #000000;
color: #9baec8;
transition: none;
pointer-events: none;
}
.video-player__spoiler.active {
display: block;
pointer-events: auto;
}
.video-player__spoiler.active:hover, .video-player__spoiler.active:active, .video-player__spoiler.active:focus {
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: 10px;
}
.video-player__buttons {
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.video-player__buttons.left button {
padding-left: 0;
}
.video-player__buttons.right button {
padding-right: 0;
}
.video-player__buttons button {
background: transparent;
padding: 2px 10px;
font-size: 16px;
border: 0;
color: rgba(255, 255, 255, 0.75);
}
.video-player__buttons button:active, .video-player__buttons button:hover, .video-player__buttons button:focus {
color: #ffffff;
}
.video-player__time-sep, .video-player__time-total, .video-player__time-current {
font-size: 14px;
font-weight: 500;
}
.video-player__time-current {
color: #ffffff;
margin-left: 10px;
}
.video-player__time-sep {
display: inline-block;
margin: 0 6px;
}
.video-player__time-sep, .video-player__time-total {
color: #ffffff;
}
.video-player__seek {
cursor: pointer;
height: 24px;
position: relative;
}
.video-player__seek::before {
content: "";
width: 100%;
background: rgba(255, 255, 255, 0.35);
border-radius: 4px;
display: block;
position: absolute;
height: 4px;
top: 10px;
}
.video-player__seek__progress, .video-player__seek__buffer {
display: block;
position: absolute;
height: 4px;
border-radius: 4px;
top: 10px;
background: #0000a8;
}
.video-player__seek__buffer {
background: rgba(255, 255, 255, 0.2);
}
.video-player__seek__handle {
position: absolute;
z-index: 3;
opacity: 0;
border-radius: 50%;
width: 12px;
height: 12px;
top: 6px;
margin-left: -6px;
transition: opacity 0.1s ease;
background: #0000a8;
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.video-player__seek__handle.active {
opacity: 1;
}
.video-player__seek:hover .video-player__seek__handle {
opacity: 1;
}
.video-player.detailed .video-player__buttons button, .video-player.fullscreen .video-player__buttons button {
padding-top: 10px;
padding-bottom: 10px;
}
.media-spoiler-video {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
margin-top: 8px;
position: relative;
border: 0;
display: block;
}
.media-spoiler-video-play-icon {
border-radius: 100px;
color: rgba(255, 255, 255, 0.8);
font-size: 36px;
left: 50%;
padding: 5px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* End Video Player */
.account-gallery__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 2px;
}
.account-gallery__item {
flex-grow: 1;
width: 50%;
overflow: hidden;
position: relative;
}
.account-gallery__item::before {
content: "";
display: block;
padding-top: 100%;
}
.account-gallery__item a {
display: block;
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
top: 0;
left: 0;
background-color: #000000;
background-size: cover;
background-position: center;
position: absolute;
color: #9baec8;
text-decoration: none;
border-radius: 4px;
}
.account-gallery__item a:hover, .account-gallery__item a:active, .account-gallery__item a:focus {
outline: 0;
color: #d9e1e8;
}
.account-gallery__item a:hover::before, .account-gallery__item a:active::before, .account-gallery__item a:focus::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.account-gallery__item__icons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
.account__section-headline {
background: #1f232b;
border-bottom: 1px solid #393f4f;
cursor: default;
display: flex;
}
.account__section-headline a {
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;
}
.account__section-headline a.active {
color: #d9e1e8;
}
.account__section-headline a.active::before, .account__section-headline a.active::after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent #393f4f;
}
.account__section-headline a.active::after {
bottom: -1px;
border-color: transparent transparent #282c37;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
}
.search-popout {
background: #ffffff;
border-radius: 4px;
padding: 10px 14px;
padding-bottom: 14px;
margin-top: 10px;
color: #9baec8;
box-shadow: 2px 4px 15px rgba(0, 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: 0.5;
animation: flicker 4s infinite;
}
noscript div {
font-size: 14px;
margin: 30px auto;
color: #d9e1e8;
max-width: 400px;
}
noscript div a {
color: #00007f;
text-decoration: underline;
}
noscript div a:hover {
text-decoration: none;
}
@keyframes flicker {
0% {
opacity: 1;
}
30% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
@media screen and (max-width: 630px) and (max-height: 400px) {
.tabs-bar,
.search {
will-change: margin-top;
transition: margin-top 400ms 100ms;
}
.navigation-bar {
will-change: padding-bottom;
transition: padding-bottom 400ms 100ms;
}
.navigation-bar > a:first-child {
will-change: margin-top, margin-left, margin-right, width;
transition: margin-top 400ms 100ms, margin-left 400ms 500ms, margin-right 400ms 500ms;
}
.navigation-bar > .navigation-bar__profile-edit {
will-change: margin-top;
transition: margin-top 400ms 100ms;
}
.navigation-bar .navigation-bar__actions > .icon-button.close {
will-change: opacity transform;
transition: opacity 200ms 100ms, transform 400ms 100ms;
}
.navigation-bar .navigation-bar__actions > .compose__action-bar .icon-button {
will-change: opacity transform;
transition: opacity 200ms 300ms, transform 400ms 100ms;
}
.is-composing .tabs-bar,
.is-composing .search {
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, 1) translate(0, 0);
bottom: 5px;
}
.is-composing .navigation-bar .navigation-bar__actions .compose__action-bar .icon-button {
pointer-events: none;
opacity: 0;
transform: scale(0, 1) translate(100%, 0);
}
}
.embed-modal {
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: none;
padding: 10px;
font-family: "mastodon-font-monospace", monospace;
background: #282c37;
color: #ffffff;
font-size: 14px;
margin: 0;
margin-bottom: 15px;
}
.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:focus, .embed-modal .embed-modal__container .embed-modal__html:active {
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;
}
.account__moved-note {
padding: 14px 10px;
padding-bottom: 16px;
background: #313543;
border-top: 1px solid #393f4f;
border-bottom: 1px solid #393f4f;
}
.account__moved-note__message {
position: relative;
margin-left: 58px;
color: #404040;
padding: 8px 0;
padding-top: 0;
padding-bottom: 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: 7px 15px;
padding-right: 5px;
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%;
margin-bottom: 6px;
}
.column-inline-form label input:focus {
outline: 0;
}
.column-inline-form .icon-button {
flex: 0 0 auto;
margin-left: 5px;
}
.drawer__backdrop {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.list-editor {
background: #282c37;
flex-direction: column;
border-radius: 8px;
box-shadow: 2px 4px 15px rgba(0, 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, 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;
}
.focal-point-modal {
max-width: 80vw;
max-height: 80vh;
position: relative;
}
.focal-point {
position: relative;
cursor: pointer;
overflow: hidden;
}
.focal-point.dragging {
cursor: move;
}
.focal-point img {
max-width: 80vw;
max-height: 80vh;
width: auto;
height: auto;
margin: auto;
}
.focal-point__reticle {
position: absolute;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
background: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/reticle.png") no-repeat 0 0;
border-radius: 50%;
box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.35);
}
.focal-point__overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.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: #000070;
color: #ffffff;
border-radius: 50%;
font-size: 21px;
line-height: 21px;
text-decoration: none;
box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.4);
}
.floating-action-button:hover, .floating-action-button:focus, .floating-action-button:active {
background: #0000a3;
}
.account__header .roles {
margin-top: 20px;
margin-bottom: 20px;
padding: 0 15px;
}
.account__header .account__header__fields {
font-size: 14px;
line-height: 20px;
overflow: hidden;
margin: 20px -10px -20px;
border-bottom: 0;
}
.account__header .account__header__fields dl {
border-top: 1px solid #393f4f;
display: flex;
}
.account__header .account__header__fields dt,
.account__header .account__header__fields dd {
box-sizing: border-box;
padding: 14px 20px;
text-align: center;
max-height: 48px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.account__header .account__header__fields dt {
color: #9baec8;
background: #1f232b;
width: 120px;
flex: 0 0 auto;
font-weight: 500;
}
.account__header .account__header__fields dd {
flex: 1 1 auto;
color: #ffffff;
background: #282c37;
}
.trends__header {
color: #404040;
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: #404040;
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:hover span, .trends__item__name a:focus span, .trends__item__name a:active span {
text-decoration: underline;
}
.trends__item__current {
flex: 0 0 auto;
width: 100px;
font-size: 24px;
line-height: 36px;
font-weight: 500;
text-align: center;
color: #d9e1e8;
}
.trends__item__sparkline {
flex: 0 0 auto;
width: 50px;
}
.trends__item__sparkline path {
stroke: #00009e !important;
}
.doodle-modal {
width: unset;
}
.doodle-modal__container {
background: #d9e1e8;
text-align: center;
line-height: 0;
}
.doodle-modal__container canvas {
border: 5px solid #d9e1e8;
}
.doodle-modal__action-bar .filler {
flex-grow: 1;
margin: 0;
padding: 0;
}
.doodle-modal__action-bar .doodle-toolbar {
line-height: 1;
display: flex;
flex-direction: column;
flex-grow: 0;
justify-content: space-around;
}
.doodle-modal__action-bar .doodle-toolbar.with-inputs label {
display: inline-block;
width: 70px;
text-align: right;
margin-right: 2px;
}
.doodle-modal__action-bar .doodle-toolbar.with-inputs input[type=number], .doodle-modal__action-bar .doodle-toolbar.with-inputs input[type=text] {
width: 40px;
}
.doodle-modal__action-bar .doodle-toolbar.with-inputs span.val {
display: inline-block;
text-align: left;
width: 50px;
}
.doodle-modal__action-bar .doodle-palette {
padding-right: 0 !important;
border: 1px solid black;
line-height: 0.2rem;
flex-grow: 0;
background: white;
}
.doodle-modal__action-bar .doodle-palette button {
appearance: none;
width: 1rem;
height: 1rem;
margin: 0;
padding: 0;
text-align: center;
color: black;
text-shadow: 0 0 1px white;
cursor: pointer;
box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
border: 1px solid black;
outline-offset: -1px;
}
.doodle-modal__action-bar .doodle-palette button.foreground {
outline: 1px dashed white;
}
.doodle-modal__action-bar .doodle-palette button.background {
outline: 1px dashed red;
}
.doodle-modal__action-bar .doodle-palette button.foreground.background {
outline: 1px dashed red;
border-color: white;
}
.compose-form__buttons-separator {
border-left: 1px solid #c3c3c3;
margin: 0 3px;
}
.compose-form__upload-button-icon {
line-height: 27px;
}
.modal-layout {
background: #282c37 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="%23404040"/></svg>') 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("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/elephant_ui_plane.svg") no-repeat left bottom/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: #404040;
line-height: 0;
}
.emoji-mart-anchor {
position: relative;
flex: 1;
text-align: center;
padding: 12px 4px;
overflow: hidden;
transition: color 0.1s ease-out;
cursor: pointer;
}
.emoji-mart-anchor:hover {
color: #363636;
}
.emoji-mart-anchor-selected {
color: #00007f;
}
.emoji-mart-anchor-selected:hover {
color: #00006b;
}
.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: #00007f;
}
.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: #ffffff;
will-change: transform;
}
.emoji-mart-scroll::-webkit-scrollbar-track:hover, .emoji-mart-scroll::-webkit-scrollbar-track:active {
background-color: rgba(0, 0, 0, 0.3);
}
.emoji-mart-search {
padding: 10px;
padding-right: 45px;
background: #ffffff;
}
.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, 0.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:focus, .emoji-mart-search input:active {
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, 0.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: #ffffff;
}
.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: 0.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;
}
}
.landing-page .grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 2fr;
grid-auto-columns: 25%;
grid-auto-rows: max-content;
}
.landing-page .grid .column-0 {
display: none;
}
.landing-page .grid .column-1 {
grid-column: 1;
grid-row: 1;
}
.landing-page .grid .column-2 {
grid-column: 2;
grid-row: 1;
}
.landing-page .grid .column-3 {
grid-column: 3;
grid-row: 1/3;
}
.landing-page .grid .column-4 {
grid-column: 1/3;
grid-row: 2;
}
@media screen and (max-width: 960px) {
.landing-page .grid {
grid-template-columns: 40% 60%;
}
.landing-page .grid .column-0 {
display: none;
}
.landing-page .grid .column-1 {
grid-column: 1;
grid-row: 1;
}
.landing-page .grid .column-1.non-preview .landing-page__forms {
height: 100%;
}
.landing-page .grid .column-2 {
grid-column: 2;
grid-row: 1/3;
}
.landing-page .grid .column-2.non-preview {
grid-column: 2;
grid-row: 1;
}
.landing-page .grid .column-3 {
grid-column: 1;
grid-row: 2/4;
}
.landing-page .grid .column-4 {
grid-column: 2;
grid-row: 3;
}
.landing-page .grid .column-4.non-preview {
grid-column: 1/3;
grid-row: 2;
}
}
@media screen and (max-width: 700px) {
.landing-page .grid {
grid-template-columns: auto;
}
.landing-page .grid .column-0 {
display: block;
grid-column: 1;
grid-row: 1;
}
.landing-page .grid .column-1 {
grid-column: 1;
grid-row: 3;
}
.landing-page .grid .column-1 .brand {
display: none;
}
.landing-page .grid .column-2 {
grid-column: 1;
grid-row: 2;
}
.landing-page .grid .column-2 .landing-page__logo,
.landing-page .grid .column-2 .landing-page__call-to-action {
display: none;
}
.landing-page .grid .column-2.non-preview {
grid-column: 1;
grid-row: 2;
}
.landing-page .grid .column-3 {
grid-column: 1;
grid-row: 5;
}
.landing-page .grid .column-4 {
grid-column: 1;
grid-row: 4;
}
.landing-page .grid .column-4.non-preview {
grid-column: 1;
grid-row: 4;
}
}
.landing-page .column-flex {
display: flex;
flex-direction: column;
}
.landing-page .separator-or {
position: relative;
margin: 40px 0;
text-align: center;
}
.landing-page .separator-or::before {
content: "";
display: block;
width: 100%;
height: 0;
border-bottom: 1px solid rgba(64, 64, 64, 0.6);
position: absolute;
top: 50%;
left: 0;
}
.landing-page .separator-or span {
display: inline-block;
background: #282c37;
font-size: 12px;
font-weight: 500;
color: #9baec8;
text-transform: uppercase;
position: relative;
z-index: 1;
padding: 0 8px;
cursor: default;
}
.landing-page p,
.landing-page li {
font-family: "mastodon-font-sans-serif", sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
margin-bottom: 12px;
color: #9baec8;
}
.landing-page p a,
.landing-page li a {
color: #00007f;
text-decoration: underline;
}
.landing-page .closed-registrations-message {
margin-top: 20px;
}
.landing-page .closed-registrations-message,
.landing-page .closed-registrations-message p {
text-align: center;
font-size: 12px;
line-height: 18px;
color: #9baec8;
margin-bottom: 0;
}
.landing-page .closed-registrations-message a,
.landing-page .closed-registrations-message p a {
color: #00007f;
text-decoration: underline;
}
.landing-page .closed-registrations-message p:last-child {
margin-bottom: 0;
}
.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-family: "mastodon-font-display", sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: #d9e1e8;
}
.landing-page h4 {
font-family: "mastodon-font-display", sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: #d9e1e8;
}
.landing-page h5 {
font-family: "mastodon-font-display", sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: #d9e1e8;
}
.landing-page h6 {
font-family: "mastodon-font-display", sans-serif;
font-size: 12px;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
color: #d9e1e8;
}
.landing-page ul,
.landing-page ol {
margin-left: 20px;
}
.landing-page ul[type=a],
.landing-page ol[type=a] {
list-style-type: lower-alpha;
}
.landing-page ul[type=i],
.landing-page ol[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(64, 64, 64, 0.6);
margin: 20px 0;
}
.landing-page hr.spacer {
height: 1px;
border: 0;
}
.landing-page .container-alt {
width: 100%;
box-sizing: border-box;
max-width: 800px;
margin: 0 auto;
word-wrap: break-word;
}
.landing-page .header-wrapper {
padding-top: 15px;
background: #282c37;
background: linear-gradient(150deg, #393f4f, #282c37);
position: relative;
}
.landing-page .header-wrapper.compact {
background: #282c37;
padding-bottom: 15px;
}
.landing-page .header-wrapper.compact .hero .heading {
padding-bottom: 20px;
font-family: "mastodon-font-sans-serif", sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: #9baec8;
}
.landing-page .header-wrapper.compact .hero .heading a {
color: #00007f;
text-decoration: underline;
}
.landing-page .brand a {
padding-left: 0;
padding-right: 0;
color: #ffffff;
}
.landing-page .brand img {
height: 32px;
position: relative;
top: 4px;
left: -10px;
}
.landing-page .header {
line-height: 30px;
overflow: hidden;
}
.landing-page .header .container-alt {
display: flex;
justify-content: space-between;
}
.landing-page .header .links {
position: relative;
z-index: 4;
}
.landing-page .header .links a {
display: flex;
justify-content: center;
align-items: center;
color: #9baec8;
text-decoration: none;
padding: 12px 16px;
line-height: 32px;
font-family: "mastodon-font-display", sans-serif;
font-weight: 500;
font-size: 14px;
}
.landing-page .header .links a:hover {
color: #d9e1e8;
}
.landing-page .header .links ul {
list-style: none;
margin: 0;
}
.landing-page .header .links ul li {
display: inline-block;
vertical-align: bottom;
margin: 0;
}
.landing-page .header .links ul li:first-child a {
padding-left: 0;
}
.landing-page .header .links ul li:last-child a {
padding-right: 0;
}
.landing-page .header .hero {
margin-top: 50px;
align-items: center;
position: relative;
}
.landing-page .header .hero .heading {
position: relative;
z-index: 4;
padding-bottom: 150px;
}
.landing-page .header .hero .simple_form,
.landing-page .header .hero .closed-registrations-message {
background: #1f232b;
width: 280px;
padding: 15px 20px;
border-radius: 4px 4px 0 0;
line-height: initial;
position: relative;
z-index: 4;
}
.landing-page .header .hero .simple_form .actions,
.landing-page .header .hero .closed-registrations-message .actions {
margin-bottom: 0;
}
.landing-page .header .hero .simple_form .actions button,
.landing-page .header .hero .simple_form .actions .button,
.landing-page .header .hero .simple_form .actions .block-button,
.landing-page .header .hero .closed-registrations-message .actions button,
.landing-page .header .hero .closed-registrations-message .actions .button,
.landing-page .header .hero .closed-registrations-message .actions .block-button {
margin-bottom: 0;
}
.landing-page .header .hero .closed-registrations-message {
min-height: 330px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.landing-page .about-short {
background: #1f232b;
padding: 50px 0 30px;
font-family: "mastodon-font-sans-serif", sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: #9baec8;
}
.landing-page .about-short a {
color: #00007f;
text-decoration: underline;
}
.landing-page .information-board {
background: #1f232b;
padding: 20px 0;
}
.landing-page .information-board .container-alt {
position: relative;
padding-right: 295px;
}
.landing-page .information-board__sections {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.landing-page .information-board__section {
flex: 1 0 0;
font-family: "mastodon-font-sans-serif", sans-serif;
font-size: 16px;
line-height: 28px;
color: #ffffff;
text-align: right;
padding: 10px 15px;
}
.landing-page .information-board__section span,
.landing-page .information-board__section strong {
display: block;
}
.landing-page .information-board__section span:last-child {
color: #d9e1e8;
}
.landing-page .information-board__section strong {
font-weight: 500;
font-size: 32px;
line-height: 48px;
}
@media screen and (max-width: 700px) {
.landing-page .information-board__section {
text-align: center;
}
}
.landing-page .information-board .panel {
position: absolute;
width: 280px;
box-sizing: border-box;
background: #17191f;
padding: 20px;
padding-top: 10px;
border-radius: 4px 4px 0 0;
right: 0;
bottom: -40px;
}
.landing-page .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;
}
.landing-page .information-board .panel .panel-header a,
.landing-page .information-board .panel .panel-header span {
font-weight: 400;
color: #7a93b6;
}
.landing-page .information-board .panel .panel-header a {
text-decoration: none;
}
.landing-page .information-board .owner {
text-align: center;
}
.landing-page .information-board .owner .avatar {
width: 80px;
height: 80px;
margin: 0 auto;
margin-bottom: 15px;
}
.landing-page .information-board .owner .avatar img {
display: block;
width: 80px;
height: 80px;
border-radius: 48px;
}
.landing-page .information-board .owner .name {
font-size: 14px;
}
.landing-page .information-board .owner .name a {
display: block;
color: #ffffff;
text-decoration: none;
}
.landing-page .information-board .owner .name a:hover .display_name {
text-decoration: underline;
}
.landing-page .information-board .owner .name .username {
display: block;
color: #9baec8;
}
.landing-page.alternative {
padding: 10px 0;
}
.landing-page.alternative .brand {
text-align: center;
padding: 30px 0;
margin-bottom: 10px;
}
.landing-page.alternative .brand img {
position: static;
padding: 10px 0;
}
@media screen and (max-width: 960px) {
.landing-page.alternative .brand {
padding: 15px 0;
}
}
@media screen and (max-width: 700px) {
.landing-page.alternative .brand {
padding: 0;
margin-bottom: -10px;
}
}
.landing-page__information, .landing-page__forms {
padding: 20px;
}
.landing-page__call-to-action {
background: #1f232b;
border-radius: 4px;
padding: 25px 40px;
overflow: hidden;
}
.landing-page__call-to-action .row {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
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;
}
.landing-page__call-to-action .row__mascot {
flex: 1;
margin: 10px -50px 0 0;
}
.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 .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__avatar {
width: 44px;
height: 44px;
background-size: 44px 44px;
}
.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__information, .landing-page__forms,
.landing-page #mastodon-timeline {
box-sizing: border-box;
background: #282c37;
border-radius: 4px;
box-shadow: 0 0 6px rgba(0, 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: #ffffff;
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;
}
.landing-page__forms {
height: 100%;
}
@media screen and (max-width: 960px) {
.landing-page__forms {
height: auto;
}
}
@media screen and (max-width: 700px) {
.landing-page__forms {
background: transparent;
box-shadow: none;
padding: 0 20px;
margin-top: 30px;
margin-bottom: 40px;
}
.landing-page__forms .separator-or span {
background: #17191f;
}
}
.landing-page__forms hr {
margin: 40px 0;
}
.landing-page__forms .button {
display: block;
}
.landing-page__forms .subtle-hint a {
text-decoration: none;
}
.landing-page__forms .subtle-hint a:hover, .landing-page__forms .subtle-hint a:focus, .landing-page__forms .subtle-hint a:active {
text-decoration: underline;
}
.landing-page #mastodon-timeline {
display: flex;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
font-family: "mastodon-font-sans-serif", sans-serif;
font-size: 13px;
line-height: 18px;
font-weight: 400;
color: #ffffff;
width: 100%;
flex: 1 1 auto;
overflow: hidden;
height: 100%;
}
.landing-page #mastodon-timeline .column-header {
color: inherit;
font-family: inherit;
font-size: 16px;
line-height: inherit;
font-weight: inherit;
margin: 0;
padding: 0;
}
.landing-page #mastodon-timeline .column {
padding: 0;
border-radius: 4px;
overflow: hidden;
width: 100%;
}
.landing-page #mastodon-timeline .scrollable {
height: 400px;
}
.landing-page #mastodon-timeline p {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: #ffffff;
margin-bottom: 20px;
}
.landing-page #mastodon-timeline p:last-child {
margin-bottom: 0;
}
.landing-page #mastodon-timeline p a {
color: #d9e1e8;
text-decoration: none;
}
.landing-page #mastodon-timeline .attachment-list__list {
margin-left: 0;
list-style: none;
}
.landing-page #mastodon-timeline .attachment-list__list li {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin-bottom: 0;
}
.landing-page #mastodon-timeline .attachment-list__list li a {
color: #404040;
text-decoration: none;
}
.landing-page #mastodon-timeline .attachment-list__list li a:hover {
text-decoration: underline;
}
@media screen and (max-width: 700px) {
.landing-page #mastodon-timeline {
height: 90vh;
}
}
.landing-page__features > p {
padding-right: 60px;
}
.landing-page__features .features-list {
margin: 40px 0;
margin-top: 30px;
}
.landing-page__features__action {
text-align: center;
}
.landing-page .features-list .features-list__row {
display: flex;
padding: 10px 0;
justify-content: space-between;
}
.landing-page .features-list .features-list__row .visual {
flex: 0 0 auto;
display: flex;
align-items: center;
margin-left: 15px;
}
.landing-page .features-list .features-list__row .visual .fa {
display: block;
color: #9baec8;
font-size: 48px;
}
.landing-page .features-list .features-list__row .text {
font-size: 16px;
line-height: 30px;
color: #9baec8;
}
.landing-page .features-list .features-list__row .text h6 {
font-size: inherit;
line-height: inherit;
margin-bottom: 0;
}
@media screen and (min-width: 960px) {
.landing-page .features-list {
display: grid;
grid-gap: 30px;
grid-template-columns: 1fr 1fr;
grid-auto-columns: 50%;
grid-auto-rows: max-content;
}
}
.landing-page .extended-description {
padding: 50px 0;
font-family: "mastodon-font-sans-serif", sans-serif;
font-size: 16px;
font-weight: 400;
font-size: 16px;
line-height: 30px;
color: #9baec8;
}
.landing-page .extended-description a {
color: #00007f;
text-decoration: underline;
}
.landing-page .footer-links {
padding-bottom: 50px;
text-align: right;
color: #404040;
}
.landing-page .footer-links p {
font-size: 14px;
}
.landing-page .footer-links a {
color: inherit;
text-decoration: underline;
}
.landing-page__footer {
margin-top: 10px;
text-align: center;
color: #404040;
}
.landing-page__footer p {
font-size: 14px;
}
.landing-page__footer p a {
color: inherit;
text-decoration: underline;
}
@media screen and (max-width: 840px) {
.landing-page .container-alt {
padding: 0 20px;
}
.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 .header .container-alt,
.landing-page .features .container-alt {
display: block;
}
.landing-page .header .links {
padding-top: 15px;
background: #1f232b;
}
.landing-page .header .links a {
padding: 12px 8px;
}
.landing-page .header .links .nav {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.landing-page .header .links .brand img {
left: 0;
top: 0;
}
.landing-page .header .hero {
margin-top: 30px;
padding: 0;
}
.landing-page .header .hero .heading {
padding: 30px 20px;
text-align: center;
}
.landing-page .header .hero .simple_form,
.landing-page .header .hero .closed-registrations-message {
background: #17191f;
width: 100%;
border-radius: 0;
box-sizing: border-box;
}
}
.landing-page .cta {
margin: 20px;
}
@media screen and (min-width: 960px) {
.landing-page.tag-page .grid {
grid-template-columns: 33% 67%;
}
}
.landing-page.tag-page .grid .column-2 {
grid-column: 2;
grid-row: 1;
}
.landing-page.tag-page .brand {
text-align: unset;
padding: 0;
}
.landing-page.tag-page .brand img {
height: 48px;
width: auto;
}
.landing-page.tag-page .cta {
margin: 0;
}
.landing-page.tag-page .cta .button {
margin-right: 4px;
}
@media screen and (max-width: 700px) {
.landing-page.tag-page .grid .column-1 {
grid-column: 1;
grid-row: 2;
}
.landing-page.tag-page .grid .column-2 {
grid-column: 1;
grid-row: 1;
}
.landing-page.tag-page .brand {
margin: 0;
}
.landing-page.tag-page .landing-page__features {
display: none;
}
}
@keyframes Swag {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 200% 0%;
}
}
.table {
width: 100%;
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.table th,
.table td {
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: #00007f;
text-decoration: underline;
}
.table a:hover {
text-decoration: none;
}
.table strong {
font-weight: 500;
}
.table strong:lang(ja) {
font-weight: 700;
}
.table strong:lang(ko) {
font-weight: 700;
}
.table strong:lang(zh-CN) {
font-weight: 700;
}
.table strong:lang(zh-HK) {
font-weight: 700;
}
.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-wrapper {
overflow: auto;
margin-bottom: 20px;
}
samp {
font-family: "mastodon-font-monospace", monospace;
}
button.table-action-link {
background: transparent;
border: 0;
font: inherit;
}
button.table-action-link,
a.table-action-link {
text-decoration: none;
display: inline-block;
margin-right: 5px;
padding: 0 10px;
color: #9baec8;
font-weight: 500;
}
button.table-action-link:hover,
a.table-action-link:hover {
color: #ffffff;
}
button.table-action-link i.fa,
a.table-action-link i.fa {
font-weight: 400;
margin-right: 5px;
}
button.table-action-link:first-child,
a.table-action-link:first-child {
padding-left: 0;
}
.batch-table__toolbar, .batch-table__row {
display: flex;
}
.batch-table__toolbar__select, .batch-table__row__select {
box-sizing: border-box;
padding: 8px 16px;
cursor: pointer;
min-height: 100%;
}
.batch-table__toolbar__select input, .batch-table__row__select input {
margin-top: 8px;
}
.batch-table__toolbar__actions, .batch-table__toolbar__content, .batch-table__row__actions, .batch-table__row__content {
padding: 8px 0;
padding-right: 16px;
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__row {
border: 1px solid #17191f;
border-top: 0;
background: #1f232b;
}
.batch-table__row:hover {
background: #242731;
}
.batch-table__row:nth-child(even) {
background: #282c37;
}
.batch-table__row:nth-child(even):hover {
background: #2c313d;
}
.batch-table__row__content {
padding-top: 12px;
padding-bottom: 16px;
}
.batch-table .status__content {
padding-top: 0;
}
.batch-table .status__content strong {
font-weight: 700;
background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet, orange, yellow, green, cyan, blue, violet);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: Swag 2s linear 0s infinite;
}
.admin-wrapper {
display: flex;
justify-content: center;
height: 100%;
}
.admin-wrapper .sidebar-wrapper {
flex: 1;
height: 100%;
background: #282c37;
display: flex;
justify-content: flex-end;
}
.admin-wrapper .sidebar {
width: 240px;
height: 100%;
padding: 0;
overflow-y: auto;
}
.admin-wrapper .sidebar .logo {
display: block;
margin: 40px auto;
width: 100px;
height: 100px;
}
.admin-wrapper .sidebar ul {
list-style: none;
border-radius: 4px 0 0 4px;
overflow: hidden;
margin-bottom: 20px;
}
.admin-wrapper .sidebar ul a {
display: block;
padding: 15px;
color: #9baec8;
text-decoration: none;
transition: all 200ms linear;
border-radius: 4px 0 0 4px;
}
.admin-wrapper .sidebar ul a i.fa {
margin-right: 5px;
}
.admin-wrapper .sidebar ul a:hover {
color: #ffffff;
background-color: #1d2028;
transition: all 100ms linear;
}
.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 ul a.selected {
color: #ffffff;
background-color: #00007f;
border-bottom: 0;
border-radius: 0;
}
.admin-wrapper .sidebar ul ul a.selected:hover {
background-color: #000099;
}
.admin-wrapper .content-wrapper {
flex: 2;
overflow: auto;
}
.admin-wrapper .content {
max-width: 700px;
padding: 20px 15px;
padding-top: 60px;
padding-left: 25px;
}
.admin-wrapper .content h2 {
color: #d9e1e8;
font-size: 24px;
line-height: 28px;
font-weight: 400;
margin-bottom: 40px;
}
.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: 500;
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: 400;
}
.admin-wrapper .content > p {
font-size: 14px;
line-height: 18px;
color: #d9e1e8;
margin-bottom: 20px;
}
.admin-wrapper .content > p strong {
color: #ffffff;
font-weight: 500;
}
.admin-wrapper .content > p strong:lang(ja) {
font-weight: 700;
}
.admin-wrapper .content > p strong:lang(ko) {
font-weight: 700;
}
.admin-wrapper .content > p strong:lang(zh-CN) {
font-weight: 700;
}
.admin-wrapper .content > p strong:lang(zh-HK) {
font-weight: 700;
}
.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(64, 64, 64, 0.6);
margin: 20px 0;
}
.admin-wrapper .content hr.spacer {
height: 1px;
border: 0;
}
.admin-wrapper .content .muted-hint {
color: #9baec8;
}
.admin-wrapper .content .muted-hint a {
color: #00007f;
}
.admin-wrapper .content .positive-hint {
color: #79bd9a;
font-weight: 500;
}
.admin-wrapper .simple_form {
max-width: 400px;
}
.admin-wrapper .simple_form.edit_user, .admin-wrapper .simple_form.new_form_admin_settings, .admin-wrapper .simple_form.new_form_two_factor_confirmation, .admin-wrapper .simple_form.new_form_delete_confirmation, .admin-wrapper .simple_form.new_import, .admin-wrapper .simple_form.new_domain_block, .admin-wrapper .simple_form.edit_domain_block {
max-width: none;
}
.admin-wrapper .simple_form .form_two_factor_confirmation_code,
.admin-wrapper .simple_form .form_delete_confirmation_password {
max-width: 400px;
}
.admin-wrapper .simple_form .actions {
max-width: 400px;
}
@media screen and (max-width: 600px) {
.admin-wrapper {
display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.admin-wrapper .sidebar-wrapper,
.admin-wrapper .content-wrapper {
flex: 0 0 auto;
height: auto;
overflow: initial;
}
.admin-wrapper .sidebar {
width: 100%;
padding: 10px 0;
height: auto;
}
.admin-wrapper .sidebar .logo {
margin: 20px auto;
}
.admin-wrapper .content {
padding-top: 20px;
}
}
.filters {
display: flex;
flex-wrap: wrap;
}
.filters .filter-subset {
flex: 0 0 auto;
margin: 0 40px 10px 0;
}
.filters .filter-subset:last-child {
margin-bottom: 20px;
}
.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) {
font-weight: 700;
}
.filters .filter-subset strong:lang(ko) {
font-weight: 700;
}
.filters .filter-subset strong:lang(zh-CN) {
font-weight: 700;
}
.filters .filter-subset strong:lang(zh-HK) {
font-weight: 700;
}
.filters .filter-subset strong:lang(zh-TW) {
font-weight: 700;
}
.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: #ffffff;
border-bottom: 2px solid #333846;
}
.filters .filter-subset a.selected {
color: #00007f;
border-bottom: 2px solid #00007f;
}
.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) {
font-weight: 700;
}
.report-accounts__item > strong:lang(ko) {
font-weight: 700;
}
.report-accounts__item > strong:lang(zh-CN) {
font-weight: 700;
}
.report-accounts__item > strong:lang(zh-HK) {
font-weight: 700;
}
.report-accounts__item > strong:lang(zh-TW) {
font-weight: 700;
}
.report-accounts__item .account-card {
flex: 1 1 auto;
}
.report-status,
.account-status {
display: flex;
margin-bottom: 10px;
}
.report-status .activity-stream,
.account-status .activity-stream {
flex: 2 0 0;
margin-right: 20px;
max-width: calc(100% - 60px);
}
.report-status .activity-stream .entry,
.account-status .activity-stream .entry {
border-radius: 4px;
}
.report-status__actions,
.account-status__actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
}
.report-status__actions .icon-button,
.account-status__actions .icon-button {
font-size: 24px;
width: 24px;
text-align: center;
margin-bottom: 10px;
}
.simple_form.new_report_note,
.simple_form.new_account_moderation_note {
max-width: 100%;
}
.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: #00007f;
text-decoration: none;
}
.back-link a:hover {
text-decoration: underline;
}
.spacer {
flex: 1 1 auto;
}
.log-entry {
margin-bottom: 20px;
line-height: 20px;
}
.log-entry__header {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px;
background: #282c37;
color: #9baec8;
border-radius: 4px 4px 0 0;
font-size: 14px;
position: relative;
}
.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: #404040;
}
.log-entry__extras {
background: #353a49;
border-radius: 0 0 4px 4px;
padding: 10px;
color: #9baec8;
font-family: "mastodon-font-monospace", monospace;
font-size: 12px;
word-wrap: break-word;
min-height: 20px;
}
.log-entry__icon {
font-size: 28px;
margin-right: 10px;
color: #404040;
}
.log-entry__icon__overlay {
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
}
.log-entry__icon__overlay.positive {
background: #79bd9a;
}
.log-entry__icon__overlay.negative {
background: #e87487;
}
.log-entry__icon__overlay.neutral {
background: #00007f;
}
.log-entry a,
.log-entry .username,
.log-entry .target {
color: #d9e1e8;
text-decoration: none;
font-weight: 500;
}
.log-entry .diff-old {
color: #e87487;
}
.log-entry .diff-neutral {
color: #d9e1e8;
}
.log-entry .diff-new {
color: #79bd9a;
}
a.name-tag,
.name-tag,
a.inline-name-tag,
.inline-name-tag {
text-decoration: none;
color: #d9e1e8;
}
a.name-tag .username,
.name-tag .username,
a.inline-name-tag .username,
.inline-name-tag .username {
font-weight: 500;
}
a.name-tag.suspended .username,
.name-tag.suspended .username,
a.inline-name-tag.suspended .username,
.inline-name-tag.suspended .username {
text-decoration: line-through;
color: #e87487;
}
a.name-tag.suspended .avatar,
.name-tag.suspended .avatar,
a.inline-name-tag.suspended .avatar,
.inline-name-tag.suspended .avatar {
filter: grayscale(100%);
opacity: 0.8;
}
a.name-tag,
.name-tag {
display: flex;
align-items: center;
}
a.name-tag .avatar,
.name-tag .avatar {
display: block;
margin: 0;
margin-right: 5px;
border-radius: 50%;
}
a.name-tag.suspended .avatar,
.name-tag.suspended .avatar {
filter: grayscale(100%);
opacity: 0.8;
}
.speech-bubble {
margin-bottom: 20px;
border-left: 4px solid #00007f;
}
.speech-bubble.positive {
border-left-color: #79bd9a;
}
.speech-bubble.negative {
border-left-color: #e87487;
}
.speech-bubble__bubble {
padding: 16px;
padding-left: 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;
padding-left: 12px;
}
.speech-bubble time {
color: #404040;
}
body.rtl {
direction: rtl;
}
body.rtl .column-header > button {
text-align: right;
padding-left: 0;
padding-right: 15px;
}
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-link__icon,
body.rtl .column-header__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 .column-header__buttons {
left: 0;
right: auto;
margin-left: -15px;
margin-right: 0;
}
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 {
margin-left: 0;
margin-right: 8px;
}
body.rtl .setting-meta__label {
float: left;
}
body.rtl .status__avatar {
left: auto;
right: 10px;
}
body.rtl .status,
body.rtl .activity-stream .status.light {
padding-left: 10px;
padding-right: 68px;
}
body.rtl .status__info .status__display-name,
body.rtl .activity-stream .status.light .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__avatar-overlay-overlay {
right: auto;
left: 0;
}
body.rtl .column-back-button--slim-button {
right: auto;
left: 0;
}
body.rtl .status__relative-time,
body.rtl .activity-stream .status.light .status__header .status__meta {
float: left;
}
body.rtl .activity-stream .detailed-status.light .detailed-status__display-name > div {
float: right;
margin-right: 0;
margin-left: 10px;
}
body.rtl .activity-stream .detailed-status.light .detailed-status__meta span > span {
margin-left: 0;
margin-right: 6px;
}
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-avatar {
margin-right: 0;
margin-left: 10px;
float: right;
}
body.rtl .detailed-status__favorites,
body.rtl .detailed-status__reblogs {
margin-left: 0;
margin-right: 6px;
}
body.rtl .fa-ul {
margin-left: 0;
margin-left: 2.14285714em;
}
body.rtl .fa-li {
left: auto;
right: -2.14285714em;
}
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,
body.rtl .simple_form .input.with_label.boolean label.checkbox {
padding-left: 0;
padding-right: 25px;
}
body.rtl .simple_form .check_boxes .checkbox input[type=checkbox],
body.rtl .simple_form .input.boolean input[type=checkbox] {
left: auto;
right: 0;
}
body.rtl .simple_form .input-with-append .input input {
padding-left: 142px;
padding-right: 0;
}
body.rtl .simple_form .input-with-append .append {
right: auto;
left: 0;
}
body.rtl .simple_form .input-with-append .append::after {
right: auto;
left: 0;
background-image: linear-gradient(to left, rgba(40, 44, 55, 0), #282c37);
}
body.rtl .table th,
body.rtl .table td {
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 .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;
}
}
.emojione[title=":video_game:"], .emojione[title=":wavy_dash:"], .emojione[title=":waving_black_flag:"], .emojione[title=":top:"], .emojione[title=":tm:"], .emojione[title=":spider:"], .emojione[title=":spades:"], .emojione[title=":soon:"], .emojione[title=":registered:"], .emojione[title=":on:"], .emojione[title=":lower_left_fountain_pen:"], .emojione[title=":heavy_plus_sign:"], .emojione[title=":heavy_multiplication_x:"], .emojione[title=":heavy_minus_sign:"], .emojione[title=":heavy_dollar_sign:"], .emojione[title=":heavy_division_sign:"], .emojione[title=":heavy_check_mark:"], .emojione[title=":end:"], .emojione[title=":currency_exchange:"], .emojione[title=":curly_loop:"], .emojione[title=":copyright:"], .emojione[title=":clubs:"], .emojione[title=":camera_with_flash:"], .emojione[title=":camera:"], .emojione[title=":bust_in_silhouette:"], .emojione[title=":bomb:"], .emojione[title=":black_small_square:"], .emojione[title=":black_nib:"], .emojione[title=":black_medium_square:"], .emojione[title=":black_medium_small_square:"], .emojione[title=":black_large_square:"], .emojione[title=":black_circle:"], .emojione[title=":back:"], .emojione[title=":ant:"], .emojione[title=":8ball:"] {
filter: drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px 1px 0 #ffffff) drop-shadow(1px -1px 0 #ffffff) drop-shadow(-1px -1px 0 #ffffff);
transform: scale(0.71);
}
/* Allow columns to grow wider as the screen gets
* wider, but don't ever let them get more than
* 400px (some people have a bunch of columns!) */
@media screen and (min-width: 1300px) {
.column {
flex-grow: 1 !important;
max-width: 400px;
}
.drawer {
width: 17%;
/* Not part of the flex fun */
max-width: 400px;
min-width: 330px;
}
}
/* Cap the column height at 100vh (fixed an old
* bug someone encountered in safari, but which
* I've seen resurface from time to time) */
.column {
max-height: 100vh;
}
/* Don't show outline around statuses if we're in
* mouse or touch mode (rather than keyboard) */
[data-whatinput=mouse] .status__content:focus, [data-whatinput=mouse] .status:focus,
[data-whatinput=mouse] .status__wrapper:focus, [data-whatinput=mouse] .status__content__text:focus, [data-whatinput=touch] .status__content:focus, [data-whatinput=touch] .status:focus,
[data-whatinput=touch] .status__wrapper:focus, [data-whatinput=touch] .status__content__text:focus {
outline: none;
}
/* Show a little arrowey thing after the time in a
* status to signal that you can click it to see
* a detailed view */
.status time:after,
.detailed-status__datetime span:after {
font: normal normal normal 14px/1 FontAwesome;
content: " ";
}
/* Don't display the elephant mascot (we have our
* own, thanks) */
.drawer__inner__mastodon {
display: none;
}
/* Let the compose area/drawer be short, but
* expand if necessary */
.drawer .drawer__inner {
overflow: visible;
height: inherit;
background-image: none;
}
.drawer__pager {
overflow-y: auto;
}
/* So we can position things absolute to it*/
.status__content {
position: relative;
}
/* Use 30% of the viewport height always*/
.detailed-status > .media-spoiler,
.status > .media-spoiler,
.video-player,
.media-gallery {
max-height: 30vh;
height: 30vh !important;
position: relative;
margin-top: 20px;
margin-left: -68px;
width: calc(100% + 80px);
}
/* Unset max-width for spoilers and the video
* player */
.detailed-status > .media-spoiler,
.status > .media-spoiler,
.video-player {
max-width: none;
}
.detailed-status .media-spoiler,
.status .media-spoiler {
height: 30vh !important;
vertical-align: middle;
}
.status__video-player-video {
transform: unset;
top: unset;
}
/* Adjust offset and width for detail view */
.detailed-status .media-gallery {
margin-left: -10px;
width: calc(100% + 22px);
}
body {
font-size: 13px;
font-family: "MS Sans Serif", "premillenium", sans-serif;
color: black;
}
.ui,
.ui .columns-area,
body.admin {
background: #008080;
}
.loading-bar {
height: 5px;
background-color: #000080;
}
.tabs-bar {
background: #bfbfbf;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
height: 30px;
}
.tabs-bar__link {
color: black;
border: 2px outset #bfbfbf;
border-top-width: 1px;
border-left-width: 1px;
margin: 2px;
padding: 3px;
}
.tabs-bar__link.active {
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
color: black;
}
.tabs-bar__link:last-child::before {
content: "Start";
color: black;
font-weight: bold;
font-size: 15px;
width: 80%;
display: block;
position: absolute;
right: 0px;
}
.tabs-bar__link:last-child {
position: relative;
flex-basis: 60px !important;
font-size: 0px;
color: #bfbfbf;
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/start.png");
background-repeat: no-repeat;
background-position: 8%;
background-clip: padding-box;
background-size: auto 50%;
}
.drawer .drawer__inner {
overflow: visible;
height: inherit;
background: #bfbfbf;
}
.drawer:after {
display: block;
content: " ";
position: absolute;
bottom: 15px;
left: 15px;
width: 132px;
height: 117px;
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/clippy_wave.gif"), url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/clippy_frame.png");
background-repeat: no-repeat;
background-position: 4px 20px, 0px 0px;
z-index: 0;
}
.drawer__pager {
overflow-y: auto;
}
.privacy-dropdown__dropdown {
z-index: 2;
}
.column {
max-height: 100vh;
}
.column > .scrollable {
background: #bfbfbf;
border-left: 2px solid #efefef;
border-top: 2px solid #efefef;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
border-radius: 0px;
border-top-width: 0px;
}
.column-header__wrapper {
color: white;
font-weight: bold;
background: #7f7f7f;
}
.column-header {
padding: 0px;
font-size: 13px;
background: #7f7f7f;
border-left: 2px solid #efefef;
border-top: 2px solid #efefef;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
border-radius: 0px;
border-bottom-width: 0px;
color: white;
font-weight: bold;
align-items: baseline;
min-height: 24px;
}
.column-header > button {
padding: 0px;
min-height: 22px;
}
.column-header__wrapper.active {
background: #00007f;
}
.column-header__wrapper.active::before {
display: none;
}
.column-header.active {
box-shadow: unset;
background: #00007f;
}
.column-header.active .column-header__icon {
color: white;
}
.column-header__buttons {
max-height: 20px;
margin: 2px;
margin-left: -2px;
}
.column-header__buttons button {
margin-left: 2px;
}
.column-header__button {
background: #bfbfbf;
color: black;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
line-height: 0px;
font-size: 14px;
padding: 0px 4px;
}
.column-header__button:hover {
color: black;
}
.column-header__button.active, .column-header__button.active:hover {
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
background-color: #7f7f7f;
}
.column-header .column-header__back-button {
background: #bfbfbf;
color: black;
padding: 2px;
padding-right: 4px;
max-height: 20px;
min-height: unset;
margin: 2px;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
font-size: 13px;
line-height: 17px;
font-weight: bold;
}
.column-header__buttons .column-header__back-button {
margin: 0;
}
.column-back-button {
background: #bfbfbf;
color: black;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
font-size: 13px;
font-weight: bold;
padding: 2px;
height: 26px;
}
.column-back-button--slim-button {
position: absolute;
top: -22px;
right: 4px;
max-height: 20px;
padding: 1px 6px 0 2px;
box-sizing: border-box;
}
.column-back-button__icon {
font-size: 11px;
margin-top: -3px;
}
.column-header__collapsible {
border-left: 2px outset #bfbfbf;
border-right: 2px outset #bfbfbf;
}
.column-header__collapsible-inner {
background: #bfbfbf;
color: black;
}
.column-header__collapsible__extra {
color: black;
}
.column-header__collapsible__extra div[role=group] {
border: 2px groove #eee;
margin-bottom: 11px;
padding: 4px;
}
.column-inline-form {
background-color: #bfbfbf;
border-left: 2px solid #efefef;
border-top: 2px solid #efefef;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
border-radius: 0px;
border-bottom-width: 0px;
border-top-width: 0px;
align-items: baseline;
}
.column-inline-form .icon-button {
font-size: 14px !important;
line-height: 17px !important;
}
.column-inline-form .setting-text {
line-height: 17px;
padding-left: 4px;
}
.column-settings__section {
color: black;
font-weight: bold;
font-size: 11px;
}
[role=group] .column-settings__section {
display: inline-block;
background-color: #bfbfbf;
position: relative;
top: -14px;
top: calc(-1em - 0.5ex);
left: 4px;
padding: 0px 4px;
margin-bottom: 0px;
}
.setting-meta__label, .setting-toggle__label {
color: black;
font-weight: normal;
}
.setting-meta__label span:before {
content: "(";
}
.setting-meta__label span:after {
content: ")";
}
.setting-toggle {
line-height: 13px;
}
.react-toggle .react-toggle-track {
border-radius: 0px;
background-color: white;
border-left: 2px solid #404040;
border-top: 2px solid #404040;
border-right: 2px solid #efefef;
border-bottom: 2px solid #efefef;
border-radius: 0px;
width: 12px;
height: 12px;
}
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background-color: white;
}
.react-toggle .react-toggle-track-check {
left: 2px;
transition: unset;
}
.react-toggle .react-toggle-track-check svg path {
fill: black;
}
.react-toggle .react-toggle-track-x {
display: none;
}
.react-toggle .react-toggle-thumb {
border-radius: 0px;
display: none;
}
.text-btn {
background-color: #bfbfbf;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
padding: 4px;
}
.text-btn:hover {
text-decoration: none;
color: black;
}
.text-btn:active {
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
}
.setting-text {
color: black;
background-color: white;
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
font-size: 13px;
padding: 2px;
}
.setting-text:active, .setting-text:focus,
.setting-text.light:active, .setting-text.light:focus {
color: black;
border-bottom: 2px inset #bfbfbf;
}
.column-header__setting-arrows .column-header__setting-btn {
padding: 3px 10px;
}
.column-header__setting-arrows .column-header__setting-btn:last-child {
padding: 3px 10px;
}
.missing-indicator {
background-color: #bfbfbf;
color: black;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
}
.missing-indicator > div {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRUaXRsZQAACJnLyy9Jyy/NSwEAD5IDblIFOhoAAAAXelRYdEF1dGhvcgAACJlLzijKz0vMAQALmgLoDsFj8gAAAQpJREFUOMuVlD0OwjAMhd2oQl04Axfo0IGBgYELcAY6cqQuSO0ZOEAZGBg6VKg74gwsEaoESRVHjusI8aQqzY8/PbtOEz1qkFSn2YevlaNOpLMJh2DwvixhuXtOa6/LCh51DUMEFkAsgAZD207Doin8mQ562JpRE5CHBAAhmIqD1L8AqzUUUJkxc6kr3AgAJ+NuvIWRdk7WcrKl0AUqcIBBHOiEbpS4m27mIL5Onfg3k0rgggeQuS2sDOGSahKR+glgqaGLgUJs951NN1q9D72cQqQWR9cr3sm9YcEssEuz6eEuZh2bu0aSOhQ1MBezu2O/+TVSvEFII3qLsZWrSA2AAUQIh1HpyP/kC++zjVSMj6ntAAAAAElFTkSuQmCC") no-repeat;
background-position: center center;
}
.empty-column-indicator,
.error-column {
background: #bfbfbf;
color: black;
}
.status__wrapper {
border: 2px groove #bfbfbf;
margin: 4px;
}
.status {
border-left: 1px solid #404040;
border-top: 1px solid #404040;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-radius: 0px;
background-color: white;
margin: 4px;
padding-bottom: 40px;
margin-bottom: 8px;
}
.status.status-direct {
background-color: #bfbfbf;
}
.status__content {
font-size: 13px;
}
.status.light .status__relative-time,
.status.light .display-name span {
color: #7f7f7f;
}
.status__action-bar {
box-sizing: border-box;
position: absolute;
bottom: -1px;
left: -1px;
background: #bfbfbf;
width: calc(100% + 2px);
padding-left: 10px;
padding: 4px 2px;
padding-bottom: 4px;
border-bottom: 2px groove #bfbfbf;
border-top: 1px outset #bfbfbf;
text-align: right;
}
.status__wrapper .status__action-bar {
border-bottom-width: 0px;
}
.status__action-bar-button {
float: right;
}
.status__action-bar-dropdown {
margin-left: auto;
margin-right: 10px;
}
.status__action-bar-dropdown .icon-button {
min-width: 28px;
}
.status.light .status__content a {
color: blue;
}
.focusable:focus {
background: #bfbfbf;
}
.focusable:focus .detailed-status__action-bar {
background: #bfbfbf;
}
.focusable:focus .status, .focusable:focus .detailed-status {
background: white;
outline: 2px dotted #808080;
}
.dropdown__trigger.icon-button {
padding-right: 6px;
}
.detailed-status__action-bar-dropdown .icon-button {
min-width: 28px;
}
.detailed-status {
background: white;
background-clip: padding-box;
margin: 4px;
border: 2px groove #bfbfbf;
padding: 4px;
}
.detailed-status__display-name {
color: #7f7f7f;
}
.detailed-status__display-name strong {
color: black;
font-weight: bold;
}
.account__avatar,
.account__avatar-overlay-base,
.account__header__avatar,
.account__avatar-overlay-overlay {
border-left: 1px solid #404040;
border-top: 1px solid #404040;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-radius: 0px;
clip-path: none;
filter: saturate(1.8) brightness(1.1);
}
.detailed-status__action-bar {
background-color: #bfbfbf;
border: 0px;
border-bottom: 2px groove #bfbfbf;
margin-bottom: 8px;
justify-items: left;
padding-left: 4px;
}
.icon-button {
background: #bfbfbf;
border-left: 2px solid #efefef;
border-top: 2px solid #efefef;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
border-radius: 0px;
padding: 0px 0px 0px 0px;
margin-right: 4px;
color: #3f3f3f;
}
.icon-button.inverted, .icon-button:hover, .icon-button.inverted:hover, .icon-button:active, .icon-button:focus {
color: #3f3f3f;
}
.icon-button:active {
border-left: 2px solid #404040;
border-top: 2px solid #404040;
border-right: 2px solid #efefef;
border-bottom: 2px solid #efefef;
border-radius: 0px;
}
.status__action-bar > .icon-button {
padding: 0px 15px 0px 0px;
min-width: 25px;
}
.icon-button.star-icon,
.icon-button.star-icon:active {
background: transparent;
border: none;
}
.icon-button.star-icon.active {
color: #ca8f04;
}
.icon-button.star-icon.active:active, .icon-button.star-icon.active:hover, .icon-button.star-icon.active:focus {
color: #ca8f04;
}
.icon-button.star-icon > i {
background: #bfbfbf;
border-left: 2px solid #efefef;
border-top: 2px solid #efefef;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
border-radius: 0px;
padding-bottom: 3px;
}
.icon-button.star-icon:active > i {
border-left: 2px solid #404040;
border-top: 2px solid #404040;
border-right: 2px solid #efefef;
border-bottom: 2px solid #efefef;
border-radius: 0px;
}
.text-icon-button {
color: #404040;
}
.detailed-status__action-bar-dropdown {
margin-left: auto;
justify-content: right;
padding-right: 16px;
}
.detailed-status__button {
flex: 0 0 auto;
}
.detailed-status__button .icon-button {
padding-left: 2px;
padding-right: 25px;
}
.status-card {
border-radius: 0px;
background: white;
border: 1px solid black;
color: black;
}
.status-card:hover {
background-color: white;
}
.status-card__title {
color: blue;
text-decoration: underline;
font-weight: bold;
}
.load-more {
width: auto;
margin: 5px auto;
background: #bfbfbf;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
color: black;
padding: 2px 5px;
}
.load-more:hover {
background: #bfbfbf;
color: black;
}
.status-card__description {
color: black;
}
.account__display-name strong, .status__display-name strong {
color: black;
font-weight: bold;
}
.account .account__display-name {
color: black;
}
.account {
border-bottom: none;
}
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
background: #bfbfbf;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
}
.reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover {
background: #bfbfbf;
}
.reply-indicator__content .status__content__spoiler-link:active, .status__content .status__content__spoiler-link:active {
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
}
.reply-indicator__content a, .status__content a {
color: blue;
}
.notification {
border: 2px groove #bfbfbf;
margin: 4px;
}
.notification__message {
color: black;
font-size: 13px;
}
.notification__display-name {
font-weight: bold;
}
.drawer__header {
background: #bfbfbf;
border-left: 2px solid #efefef;
border-top: 2px solid #efefef;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
border-radius: 0px;
justify-content: left;
margin-bottom: 0px;
padding-bottom: 2px;
border-bottom: 2px groove #bfbfbf;
}
.drawer__tab {
color: black;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
padding: 5px;
margin: 2px;
flex: 0 0 auto;
}
.drawer__tab:first-child::before {
content: "Start";
color: black;
font-weight: bold;
font-size: 15px;
width: 80%;
display: block;
position: absolute;
right: 0px;
}
.drawer__tab:first-child {
position: relative;
padding: 5px 15px;
width: 40px;
font-size: 0px;
color: #bfbfbf;
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/start.png");
background-repeat: no-repeat;
background-position: 8%;
background-clip: padding-box;
background-size: auto 50%;
}
.drawer__header a:hover {
background-color: transparent;
}
.drawer__header a:first-child:hover {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII=");
background-repeat: no-repeat;
background-position: 8%;
background-clip: padding-box;
background-size: auto 50%;
transition: unset;
}
.search {
background: #bfbfbf;
padding-top: 2px;
padding: 2px;
border: 2px outset #bfbfbf;
border-top-width: 0px;
border-bottom: 2px groove #bfbfbf;
margin-bottom: 0px;
}
.search input {
background-color: white;
color: black;
border-left: 1px solid #404040;
border-top: 1px solid #404040;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-radius: 0px;
}
.search__input:focus {
background-color: white;
}
.search-popout {
box-shadow: unset;
color: black;
border-radius: 0px;
background-color: #ffffcc;
border: 1px solid black;
}
.search-popout h4 {
color: black;
text-transform: none;
font-weight: bold;
}
.search-results__header {
background-color: #bfbfbf;
color: black;
border-bottom: 2px groove #bfbfbf;
}
.search-results__hashtag {
color: blue;
}
.search-results__section h5:before {
display: none;
}
.search-results__section h5 {
background: #bfbfbf;
}
.search-results__section h5 span {
color: black;
padding: 0px 2px;
}
.search-results__section {
border: 3px groove white;
margin: 11px 6px 9px 3px;
}
.search-results__section .account:hover,
.search-results__section .account:hover .account__display-name,
.search-results__section .account:hover .account__display-name strong,
.search-results__section .search-results__hashtag:hover {
background-color: #00007f;
color: white;
}
.search__icon .fa {
color: #808080;
}
.search__icon .fa.active {
opacity: 1;
}
.search__icon .fa:hover {
color: #808080;
}
.trends__item__name a,
.trends__item__current {
color: black;
}
.drawer__inner,
.drawer__inner.darker {
background-color: #bfbfbf;
border: 2px outset #bfbfbf;
border-top-width: 0px;
}
.navigation-bar {
color: black;
}
.navigation-bar strong {
color: black;
font-weight: bold;
}
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
border-radius: 0px;
border-left: 1px solid #404040;
border-top: 1px solid #404040;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-radius: 0px;
}
.compose-form .autosuggest-textarea__textarea {
border-bottom: 0px;
}
.compose-form__uploads-wrapper {
border-radius: 0px;
border-bottom: 1px inset #bfbfbf;
border-top-width: 0px;
}
.compose-form__upload-wrapper {
border-left: 1px inset #bfbfbf;
border-right: 1px inset #bfbfbf;
}
.compose-form .compose-form__buttons-wrapper {
background-color: #bfbfbf;
border: 2px groove #bfbfbf;
margin-top: 4px;
padding: 4px 8px;
}
.compose-form__buttons {
background-color: #bfbfbf;
border-radius: 0px;
box-shadow: unset;
}
.compose-form__buttons-separator {
border-left: 2px groove #bfbfbf;
}
.privacy-dropdown.active .privacy-dropdown__value.active,
.advanced-options-dropdown.open .advanced-options-dropdown__value {
background: #bfbfbf;
}
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
color: #404040;
}
.privacy-dropdown.active .privacy-dropdown__value {
background: #bfbfbf;
box-shadow: unset;
}
.privacy-dropdown__option.active, .privacy-dropdown__option:hover,
.privacy-dropdown__option.active:hover {
background: #00007f;
}
.privacy-dropdown__dropdown,
.privacy-dropdown.active .privacy-dropdown__dropdown,
.advanced-options-dropdown__dropdown,
.advanced-options-dropdown.open .advanced-options-dropdown__dropdown {
box-shadow: unset;
color: black;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
background: #bfbfbf;
}
.privacy-dropdown__option__content {
color: black;
}
.privacy-dropdown__option__content strong {
font-weight: bold;
}
.compose-form__warning::before {
content: "Tip:";
font-weight: bold;
display: block;
position: absolute;
top: -10px;
background-color: #bfbfbf;
font-size: 11px;
padding: 0px 5px;
}
.compose-form__warning {
position: relative;
box-shadow: unset;
border: 2px groove #bfbfbf;
background-color: #bfbfbf;
color: black;
}
.compose-form__warning a {
color: blue;
}
.compose-form__warning strong {
color: black;
text-decoration: underline;
}
.compose-form__buttons button.active:last-child {
border-left: 2px solid #404040;
border-top: 2px solid #404040;
border-right: 2px solid #efefef;
border-bottom: 2px solid #efefef;
border-radius: 0px;
background: #dfdfdf;
color: #7f7f7f;
}
.compose-form__upload-thumbnail {
border-radius: 0px;
border: 2px groove #bfbfbf;
background-color: #bfbfbf;
padding: 2px;
box-sizing: border-box;
}
.compose-form__upload-thumbnail .icon-button {
max-width: 20px;
max-height: 20px;
line-height: 10px !important;
}
.compose-form__upload-thumbnail .icon-button::before {
content: "X";
font-size: 13px;
font-weight: bold;
color: black;
}
.compose-form__upload-thumbnail .icon-button i {
display: none;
}
.emoji-picker-dropdown__menu {
z-index: 2;
}
.emoji-dialog.with-search {
box-shadow: unset;
border-radius: 0px;
background-color: #bfbfbf;
border: 1px solid black;
box-sizing: content-box;
}
.emoji-dialog .emoji-search {
color: black;
background-color: white;
border-radius: 0px;
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
}
.emoji-dialog .emoji-search-wrapper {
border-bottom: 2px groove #bfbfbf;
}
.emoji-dialog .emoji-category-title {
color: black;
font-weight: bold;
}
.reply-indicator {
background-color: #bfbfbf;
border-radius: 3px;
border: 2px groove #bfbfbf;
}
.button {
background-color: #bfbfbf;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
border-radius: 0px;
color: black;
font-weight: bold;
}
.button:hover, .button:focus, .button:disabled {
background-color: #bfbfbf;
}
.button:active {
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
}
.button:disabled {
color: #808080;
text-shadow: 1px 1px 0px #efefef;
}
.button:disabled:active {
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
}
.column-link {
background-color: transparent;
color: black;
}
.column-link:hover {
background-color: #00007f;
color: white;
}
.column-link__badge {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/alert_badge.png");
background-repeat: no-repeat;
background-size: contain;
background-color: transparent;
border-radius: 0;
box-sizing: border-box;
width: 24px;
height: 24px;
padding-top: 4px;
padding-left: 0px;
padding-right: 1px;
text-align: center;
position: relative;
top: 2px;
}
.column-link:hover .column-link__badge {
color: black;
}
.column-subheading {
background-color: transparent;
color: black;
}
.column {
overflow-y: auto;
}
.getting-started__wrapper {
position: relative;
top: -60px;
padding-top: 0px;
z-index: 10;
box-shadow: inset -1px 0px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px 0px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
background-color: #bfbfbf;
border-top: 60px solid #008080;
border-bottom: 2px groove #bfbfbf;
height: unset !important;
}
.getting-started__wrapper .navigation-bar {
padding-left: 45px;
}
.getting-started__wrapper .column-subheading {
font-size: 0px;
margin: 0px;
padding: 0px;
background-color: transparent;
color: black;
border-bottom: 2px groove #bfbfbf;
text-transform: none;
}
.getting-started__wrapper .column-link {
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: 36px 50%;
padding-left: 45px;
}
.getting-started__wrapper .column-link:hover {
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: 36px 50%;
}
.getting-started__wrapper .column-link i {
font-size: 0px;
width: 32px;
}
@media screen and (min-width: 360px) {
.getting-started__wrapper {
margin-bottom: 0px;
}
}
.getting-started__wrapper + .flex-spacer {
display: none;
}
.column-link[href="/web/timelines/home"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_home.png");
}
.column-link[href="/web/timelines/home"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_home.png");
}
.column-link[href="/web/notifications"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_notifications.png");
}
.column-link[href="/web/notifications"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_notifications.png");
}
.column-link[href="/web/timelines/public"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_public.png");
}
.column-link[href="/web/timelines/public"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_public.png");
}
.column-link[href="/web/timelines/public/local"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_local.png");
}
.column-link[href="/web/timelines/public/local"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_local.png");
}
.column-link[href="/web/timelines/direct"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_direct.png");
}
.column-link[href="/web/timelines/direct"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_direct.png");
}
.column-link[href="/web/pinned"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_pin.png");
}
.column-link[href="/web/pinned"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_pin.png");
}
.column-link[href="/web/favourites"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_likes.png");
}
.column-link[href="/web/favourites"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_likes.png");
}
.column-link[href="/web/lists"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_lists.png");
}
.column-link[href="/web/lists"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_lists.png");
}
.column-link[href="/web/follow_requests"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_follow_requests.png");
}
.column-link[href="/web/follow_requests"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_follow_requests.png");
}
.column-link[href="/web/blocks"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_blocks.png");
}
.column-link[href="/web/blocks"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_blocks.png");
}
.column-link[href="/web/domain_blocks"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_domain_blocks.png");
}
.column-link[href="/web/domain_blocks"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_domain_blocks.png");
}
.column-link[href="/web/mutes"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_mutes.png");
}
.column-link[href="/web/mutes"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_mutes.png");
}
.column-link[href="/settings/preferences"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_settings.png");
}
.column-link[href="/settings/preferences"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_settings.png");
}
.getting-started__footer ul li a[href="/web/keyboard-shortcuts"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_keyboard_shortcuts.png");
}
.getting-started__footer ul li a[href="/web/keyboard-shortcuts"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_keyboard_shortcuts.png");
}
.getting-started__footer ul li a[href="/invites"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_invite.png");
}
.getting-started__footer ul li a[href="/invites"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_invite.png");
}
.getting-started__footer ul li a[href="/terms"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_tos.png");
}
.getting-started__footer ul li a[href="/terms"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_tos.png");
}
.getting-started__footer ul li a[href="https://github.com/tootsuite/documentation#documentation"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_docs.png");
}
.getting-started__footer ul li a[href="https://github.com/tootsuite/documentation#documentation"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_docs.png");
}
.getting-started__footer ul li a[href="/about/more"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_about.png");
}
.getting-started__footer ul li a[href="/about/more"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_about.png");
}
.getting-started__footer ul li a[href="/auth/sign_out"] {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_logout.png");
}
.getting-started__footer ul li a[href="/auth/sign_out"]:hover {
background-image: url("https://cdn.rawgit.com/cybrespace/mastodon/cybrespace/app/javascript/images/icon_logout.png");
}
.getting-started__footer {
background-color: #bfbfbf;
padding: 0px;
position: relative;
top: -62px;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
}
.getting-started__footer p {
margin-left: 45px;
}
.getting-started__footer ul {
display: block;
}
.getting-started__footer ul li {
cursor: pointer;
display: block;
font-size: 0px;
padding: 0px;
line-height: 0;
}
.getting-started__footer ul li a {
padding: 15px;
padding-left: 77px;
line-height: 1em;
font-size: 16px;
display: block;
color: black;
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: 36px 50%;
}
.getting-started__footer ul li a:hover {
text-decoration: none;
}
.getting-started__footer ul li:hover {
background-color: #00007f;
}
.getting-started__footer ul li:hover a {
color: white;
}
.getting-started__wrapper::before {
content: "Start";
display: block;
color: black;
font-weight: bold;
font-size: 15px;
position: absolute;
top: -32px;
left: 0px;
padding: 5px 15px;
width: 50px;
font-size: 16px;
padding-left: 25px;
background-color: #bfbfbf;
z-index: 12;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAF3pUWHRBdXRob3IAAAiZS84oys9LzAEAC5oC6A7BY/IAAACWSURBVCiRhVJJDsQgDEuqOfRZ7a1P5gbP4uaJaEjTADMWQhHYjlk4p0wLnNdptdF4KvBUDyGzVwc2xO+uKtH+1o0ytEEmqFpuxlvFCGCxKbNIT56QCi2MzaA/2Mz+mERSOeqzJG2RUxkjdTabgPtFoZ1bZxcKvgPcLZVufAyR9Ni8v5dWDzfFx0giC1RvZFv6l35QQ/Mvv39XXgGzQpoAAAAASUVORK5CYII=");
background-repeat: no-repeat;
background-position: 8%;
background-clip: padding-box;
background-size: auto 50%;
border-left: 2px solid #404040;
border-top: 2px solid #404040;
border-right: 2px solid #efefef;
border-bottom: 2px solid #efefef;
border-radius: 0px;
}
.getting-started__footer::after {
content: "Mastodon 95";
font-weight: bold;
font-size: 23px;
color: white;
line-height: 30px;
padding-left: 20px;
padding-right: 40px;
left: 0px;
box-sizing: border-box;
bottom: -32px;
display: block;
position: absolute;
background-color: #7f7f7f;
width: 760px;
height: 32px;
z-index: 11;
border-left: 2px solid #404040;
border-top: 2px solid #efefef;
border-right: 2px solid #efefef;
border-radius: 0px;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
transform-origin: top left;
}
.column .static-content.getting-started {
display: none;
}
.keyboard-shortcuts kbd {
background-color: #bfbfbf;
}
.account__header {
background-color: #7f7f7f;
}
.account__header .account__header__content {
color: white;
}
.account__header .account__header__fields {
border-left: 1px solid black;
border-top: 1px solid black;
}
.account__header .account__header__fields dt {
background-color: #bfbfbf;
color: black;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
}
.account__header .account__header__fields dd {
background-color: white;
border: 1px solid #bfbfbf;
color: black;
}
.account__header .account__header__fields dd, .account__header .account__header__fields dt {
padding: 5px 8px;
}
.account-authorize__wrapper {
border: 2px groove #bfbfbf;
margin: 2px;
padding: 2px;
}
.domain .domain__domain-name strong {
color: black;
}
.account--panel {
background-color: #bfbfbf;
border: 0px;
border-top: 2px groove #bfbfbf;
}
.account-authorize .account__header__content {
color: black;
margin: 10px;
}
.account__action-bar__tab > span {
color: black;
font-weight: bold;
}
.account__action-bar__tab strong {
color: black;
}
.account__action-bar {
border: unset;
}
.account__action-bar__tab {
border: 1px outset #bfbfbf;
}
.account__action-bar__tab:active {
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
}
.account__section-headline {
background: #bfbfbf;
margin-top: 5px;
}
.account__section-headline > a {
box-shadow: inset -1px 0px 0px #000000, inset 1px 0px 0px #ffffff, inset 0px 1px 0px #ffffff, inset 0px 2px 0px #dfdfdf, inset -2px 0px 0px #808080, inset 2px 0px 0px #dfdfdf;
border-radius: 0px;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
color: black;
padding: 5px;
}
.account__section-headline > a.active {
background: #404040;
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
color: white;
}
.account__section-headline > a.active:before, .account__section-headline > a.active:after {
display: none;
}
.dropdown--active .dropdown__content > ul,
.dropdown-menu {
background: #ffffcc;
border-radius: 0px;
border: 1px solid black;
box-shadow: unset;
margin-top: 6px;
}
.dropdown-menu a {
background-color: transparent;
}
.dropdown-menu__arrow.bottom {
border-bottom-color: #ffffcc;
}
.dropdown-menu__arrow.top {
border-top-color: #ffffcc;
}
.dropdown-menu__arrow:before {
position: relative;
border: 0 solid transparent;
display: block;
content: "";
left: -8px;
z-index: -1;
}
.dropdown-menu__arrow.bottom::before {
border-bottom-color: black;
border-width: 0 8px 6px;
bottom: 1px;
}
.dropdown-menu__arrow.top::before {
border-top-color: black;
border-width: 6px 8px 0;
top: -5px;
}
.dropdown-menu {
margin-top: 6px;
}
.dropdown--active::after {
display: none;
}
.dropdown--active .icon-button {
color: black;
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
}
.dropdown--active .dropdown__content > ul > li > a {
background: transparent;
}
.dropdown--active .dropdown__content > ul > li > a:hover {
background: transparent;
color: black;
text-decoration: underline;
}
.dropdown__sep,
.dropdown-menu__separator {
border-color: #7f7f7f;
}
.detailed-status__action-bar-dropdown .dropdown--active .dropdown__content.dropdown__left {
left: unset;
}
.dropdown > .icon-button, .detailed-status__action-bar .icon-button,
.status__action-bar .icon-button, .star-icon i {
/* i don't know what's going on with the inline
styles someone should look at the react code */
height: 25px !important;
width: 28px !important;
box-sizing: border-box;
}
.icon-button {
height: auto !important;
width: auto !important;
}
.status__action-bar-dropdown .icon-button {
position: relative;
top: -1px;
}
.fa-user-plus, .fa-user-times {
padding: 2px 0px 2px 1px;
}
.fa-ellipsis-h {
padding-top: 3px;
}
.status__action-bar-button .fa-floppy-o {
padding-top: 2px;
}
.notification .status__action-bar {
border-bottom: none;
}
.notification .status {
margin-bottom: 4px;
}
.status__wrapper .status {
margin-bottom: 3px;
}
.status__wrapper {
margin-bottom: 8px;
}
.status__prepend {
color: black;
font-size: 13px;
}
.icon-button .fa-retweet {
position: relative;
top: -1px;
}
.embed-modal, .error-modal, .onboarding-modal,
.actions-modal, .boost-modal, .doodle-modal, .confirmation-modal, .report-modal {
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
background: #bfbfbf;
}
.actions-modal::before,
.boost-modal::before,
.doodle-modal::before,
.confirmation-modal::before,
.report-modal::before {
content: "Confirmation";
display: block;
background: #00007f;
color: white;
font-weight: bold;
padding-left: 2px;
}
.boost-modal::before, .doodle-modal::before {
content: "Boost confirmation";
}
.boost-modal__action-bar > div > span:before, .doodle-modal__action-bar > div > span:before {
content: "Tip: ";
font-weight: bold;
}
.boost-modal__action-bar, .doodle-modal__action-bar, .confirmation-modal__action-bar, .report-modal__action-bar {
background: #bfbfbf;
margin-top: -15px;
}
.embed-modal h4, .error-modal h4, .onboarding-modal h4 {
background: #00007f;
color: white;
font-weight: bold;
padding: 2px;
font-size: 13px;
text-align: left;
}
.media-modal .media-modal__close {
font-size: 14px !important;
line-height: 17px !important;
margin-right: 4vw;
margin-top: 4vh;
}
.confirmation-modal__action-bar .confirmation-modal__cancel-button {
color: black;
}
.confirmation-modal__action-bar .confirmation-modal__cancel-button:active, .confirmation-modal__action-bar .confirmation-modal__cancel-button:focus, .confirmation-modal__action-bar .confirmation-modal__cancel-button:hover {
color: black;
}
.confirmation-modal__action-bar .confirmation-modal__cancel-button:active {
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
}
.embed-modal .embed-modal__container .embed-modal__html,
.embed-modal .embed-modal__container .embed-modal__html:focus {
background: white;
color: black;
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
}
.report-modal__target .media-modal__close {
top: 3px;
right: 0px;
font-size: 12px !important;
line-height: 13px !important;
}
.report-modal__comment p {
font-size: 12px;
margin-bottom: 1em;
padding-left: 3px;
}
.report-modal__comment .setting-text.light {
border-radius: 0;
}
.report-modal__container {
margin-right: 2px;
}
.report-modal::before {
height: 22px;
line-height: 23px;
}
.status-check-box__status .media-gallery {
margin: unset;
}
.modal-root__overlay,
.account__header > div {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFnpUWHRUaXRsZQAACJnLzU9JzElKBwALgwLXaCRlPwAAABd6VFh0QXV0aG9yAAAImUvOKMrPS8wBAAuaAugOwWPyAAAAEUlEQVQImWNgYGD4z4AE/gMADwMB/414xEUAAAAASUVORK5CYII=");
}
.admin-wrapper::before {
position: absolute;
top: 0px;
content: "Control Panel";
color: white;
background-color: #00007f;
font-size: 13px;
font-weight: bold;
width: calc(100%);
margin: 2px;
display: block;
padding: 2px;
padding-left: 22px;
box-sizing: border-box;
}
.admin-wrapper {
position: relative;
background: #bfbfbf;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
width: 70vw;
height: 80vh;
margin: 10vh auto;
color: black;
padding-top: 24px;
flex-direction: column;
overflow: hidden;
}
@media screen and (max-width: 1120px) {
.admin-wrapper {
width: 90vw;
height: 95vh;
margin: 2.5vh auto;
}
}
@media screen and (max-width: 740px) {
.admin-wrapper {
width: 100vw;
height: 95vh;
height: calc(100vh - 24px);
margin: 0px 0px 0px 0px;
}
}
.admin-wrapper .sidebar-wrapper {
position: static;
height: auto;
flex: 0 0 auto;
margin: 2px;
}
.admin-wrapper .content-wrapper {
flex: 1 1 auto;
width: calc(100% - 20px);
border-left: 2px solid #efefef;
border-top: 2px solid #efefef;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
border-radius: 0px;
position: relative;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 40px;
box-sizing: border-box;
}
.admin-wrapper .content {
background-color: #bfbfbf;
width: 100%;
max-width: 100%;
min-height: 100%;
box-sizing: border-box;
position: relative;
}
.admin-wrapper .content h4 {
color: black;
}
.admin-wrapper .sidebar {
position: static;
background: #bfbfbf;
color: black;
width: 100%;
height: auto;
padding-bottom: 20px;
}
.admin-wrapper .sidebar .logo {
position: absolute;
top: 2px;
left: 4px;
width: 18px;
height: 18px;
margin: 0px;
}
.admin-wrapper .sidebar > ul {
background: #bfbfbf;
margin: 0px;
margin-left: 8px;
color: black;
}
.admin-wrapper .sidebar > ul > li {
display: inline-block;
}
.admin-wrapper .sidebar > ul > li#settings, .admin-wrapper .sidebar > ul > li#admin {
padding: 2px;
border: 0px solid transparent;
}
.admin-wrapper .sidebar > ul > li#logout {
position: absolute;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
right: 12px;
bottom: 10px;
}
.admin-wrapper .sidebar > ul > li#web {
display: inline-block;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
position: absolute;
left: 12px;
bottom: 10px;
}
.admin-wrapper .sidebar > ul > li > a {
display: inline-block;
box-shadow: inset -1px 0px 0px #000000, inset 1px 0px 0px #ffffff, inset 0px 1px 0px #ffffff, inset 0px 2px 0px #dfdfdf, inset -2px 0px 0px #808080, inset 2px 0px 0px #dfdfdf;
border-radius: 0px;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
padding: 2px 5px;
margin: 0px;
color: black;
vertical-align: baseline;
}
.admin-wrapper .sidebar > ul > li > a.selected {
background: #bfbfbf;
color: black;
padding-top: 4px;
padding-bottom: 4px;
}
.admin-wrapper .sidebar > ul > li > a:hover {
background: #bfbfbf;
color: black;
}
.admin-wrapper .sidebar > ul > li > ul {
width: calc(100% - 20px);
background: transparent;
position: absolute;
left: 10px;
top: 54px;
z-index: 3;
}
.admin-wrapper .sidebar > ul > li > ul > li {
background: #bfbfbf;
display: inline-block;
vertical-align: baseline;
}
.admin-wrapper .sidebar > ul > li > ul > li > a {
background: #bfbfbf;
box-shadow: inset -1px 0px 0px #000000, inset 1px 0px 0px #ffffff, inset 0px 1px 0px #ffffff, inset 0px 2px 0px #dfdfdf, inset -2px 0px 0px #808080, inset 2px 0px 0px #dfdfdf;
border-radius: 0px;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
color: black;
padding: 2px 5px;
position: relative;
z-index: 3;
}
.admin-wrapper .sidebar > ul > li > ul > li > a.selected {
background: #bfbfbf;
color: black;
padding-bottom: 4px;
padding-top: 4px;
padding-right: 7px;
margin-left: -2px;
margin-right: -2px;
position: relative;
z-index: 4;
}
.admin-wrapper .sidebar > ul > li > ul > li > a.selected:first-child {
margin-left: 0px;
}
.admin-wrapper .sidebar > ul > li > ul > li > a.selected:hover {
background: transparent;
color: black;
}
.admin-wrapper .sidebar > ul > li > ul > li > a:hover {
background: #bfbfbf;
color: black;
}
@media screen and (max-width: 1520px) {
.admin-wrapper .sidebar > ul > li > ul {
max-width: 1000px;
}
.admin-wrapper .sidebar {
padding-bottom: 45px;
}
}
@media screen and (max-width: 600px) {
.admin-wrapper .sidebar > ul > li > ul {
max-width: 500px;
}
.admin-wrapper .sidebar {
padding: 0px;
padding-bottom: 70px;
width: 100%;
height: auto;
}
.admin-wrapper .content-wrapper {
overflow: auto;
height: 80%;
height: calc(100% - 150px);
}
}
.flash-message {
background-color: #ffffcc;
color: black;
border: 1px solid black;
border-radius: 0px;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
.admin-wrapper table {
background-color: white;
border-left: 1px solid #404040;
border-top: 1px solid #404040;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-radius: 0px;
}
.admin-wrapper .table th, .table td {
background-color: transparent;
}
.admin-wrapper button.table-action-link,
.admin-wrapper a.table-action-link,
.admin-wrapper button.table-action-link:hover,
.admin-wrapper a.table-action-link:hover,
.admin-wrapper a.name-tag,
.admin-wrapper .name-tag,
.admin-wrapper a.inline-name-tag,
.admin-wrapper .inline-name-tag,
.admin-wrapper .content h2,
.simple_form .input.with_label .label_input > label,
.admin-wrapper .content h6,
.admin-wrapper .content > p,
.admin-wrapper .content .muted-hint,
.simple_form span.hint,
.simple_form h4,
.simple_form .check_boxes .checkbox label,
.simple_form .input.with_label.boolean .label_input > label,
.filters .filter-subset a,
.simple_form .input.radio_buttons .radio label,
a.table-action-link,
a.table-action-link:hover,
.simple_form .input.with_block_label > label,
.simple_form p.hint {
color: black;
}
.table > tbody > tr:nth-child(2n+1) > td,
.table > tbody > tr:nth-child(2n+1) > th {
background-color: white;
}
.simple_form input[type=text],
.simple_form input[type=number],
.simple_form input[type=email],
.simple_form input[type=password],
.simple_form textarea {
color: black;
background-color: white;
border-left: 1px solid #404040;
border-top: 1px solid #404040;
border-right: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-radius: 0px;
}
.simple_form input[type=text]:active, .simple_form input[type=text]:focus,
.simple_form input[type=number]:active,
.simple_form input[type=number]:focus,
.simple_form input[type=email]:active,
.simple_form input[type=email]:focus,
.simple_form input[type=password]:active,
.simple_form input[type=password]:focus,
.simple_form textarea:active,
.simple_form textarea:focus {
background-color: white;
}
.simple_form button,
.simple_form .button,
.simple_form .block-button {
background: #bfbfbf;
box-shadow: inset -1px -1px 0px #000000, inset 1px 1px 0px #ffffff, inset -2px -2px 0px #808080, inset 2px 2px 0px #dfdfdf;
border-radius: 0px;
color: black;
font-weight: normal;
}
.simple_form button:hover,
.simple_form .button:hover,
.simple_form .block-button:hover {
background: #bfbfbf;
}
.simple_form .warning, .table-form .warning {
background: #ffffcc;
color: black;
box-shadow: unset;
text-shadow: unset;
border: 1px solid black;
}
.simple_form .warning a, .table-form .warning a {
color: blue;
text-decoration: underline;
}
.simple_form button.negative,
.simple_form .button.negative,
.simple_form .block-button.negative {
background: #bfbfbf;
}
.filters .filter-subset {
border: 2px groove #bfbfbf;
padding: 2px;
}
.filters .filter-subset a::before {
content: "";
background-color: white;
border-radius: 50%;
border: 2px solid black;
border-top-color: #7f7f7f;
border-left-color: #7f7f7f;
border-bottom-color: #f5f5f5;
border-right-color: #f5f5f5;
width: 12px;
height: 12px;
display: inline-block;
vertical-align: middle;
margin-right: 2px;
}
.filters .filter-subset a.selected::before {
background-color: black;
box-shadow: inset 0 0 0 3px white;
}
.filters .filter-subset a,
.filters .filter-subset a:hover,
.filters .filter-subset a.selected {
color: black;
border-bottom: 0px solid transparent;
}
.drawer__inner__mastodon {
display: none;
}
.list-editor h4 {
padding: 2px;
color: white;
font-size: 14px;
font-weight: bold;
background: #00007f;
border-radius: 0;
}
.list-editor {
border-left: 2px solid #efefef;
border-top: 2px solid #efefef;
border-right: 2px solid #404040;
border-bottom: 2px solid #404040;
border-radius: 0px;
box-shadow: unset;
}
.list-editor .drawer__inner {
box-shadow: inset 1px 1px 0px #000000, inset -1px -1px 0px #ffffff, inset 2px 2px 0px #808080, inset -2px -2px 0px #dfdfdf;
border-width: 0px;
border-radius: 0px;
border-radius: 0;
}
.batch-table__toolbar {
border-radius: 0px;
background-color: white;
border: 1px solid black;
}
.batch-table__row {
border: 1px solid black;
background-color: white;
}
.batch-table__row:hover {
background-color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment