6345 lines
148 KiB
CSS
6345 lines
148 KiB
CSS
.login-form {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding: 0.6em;
|
|
}
|
|
.login-form .btn {
|
|
min-height: 2em;
|
|
width: 10em;
|
|
}
|
|
.login-form .register {
|
|
-ms-flex: 1 1;
|
|
flex: 1 1;
|
|
}
|
|
.login-form .login-bottom {
|
|
margin-top: 1em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.login-form .form-group {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding: 0.3em 0.5em 0.6em;
|
|
line-height: 24px;
|
|
}
|
|
.login-form .form-bottom {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: 0.5em;
|
|
height: 32px;
|
|
}
|
|
.login-form .form-bottom button {
|
|
width: 10em;
|
|
}
|
|
.login-form .form-bottom p {
|
|
margin: 0.35em;
|
|
padding: 0.35em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.login-form .error {
|
|
text-align: center;
|
|
animation-name: shakeError;
|
|
animation-duration: 0.4s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.media-upload {
|
|
cursor: pointer;
|
|
}
|
|
.media-upload .hidden-input-file {
|
|
display: none;
|
|
}
|
|
.ScopeSelector .scope {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
min-width: 1.3em;
|
|
min-height: 1.3em;
|
|
text-align: center;
|
|
}
|
|
.ScopeSelector .scope.selected svg {
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
@charset "UTF-8";
|
|
.checkbox {
|
|
position: relative;
|
|
display: inline-block;
|
|
min-height: 1.2em;
|
|
}
|
|
.checkbox-indicator {
|
|
position: relative;
|
|
padding-left: 1.2em;
|
|
}
|
|
.checkbox-indicator::before {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
display: block;
|
|
content: "\2713";
|
|
transition: color 200ms;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
border-radius: 2px;
|
|
border-radius: var(--checkboxRadius, 2px);
|
|
box-shadow: 0px 0px 2px black inset;
|
|
box-shadow: var(--inputShadow);
|
|
background-color: #182230;
|
|
background-color: var(--input, #182230);
|
|
vertical-align: top;
|
|
text-align: center;
|
|
line-height: 1.1em;
|
|
font-size: 1.1em;
|
|
color: transparent;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
.checkbox.disabled .checkbox-indicator::before,
|
|
.checkbox.disabled .label {
|
|
opacity: 0.5;
|
|
}
|
|
.checkbox.disabled .label {
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.checkbox input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
.checkbox input[type=checkbox]:checked + .checkbox-indicator::before {
|
|
color: #b9b9ba;
|
|
color: var(--inputText, #b9b9ba);
|
|
}
|
|
.checkbox input[type=checkbox]:indeterminate + .checkbox-indicator::before {
|
|
content: "\2013";
|
|
color: #b9b9ba;
|
|
color: var(--inputText, #b9b9ba);
|
|
}
|
|
.checkbox > span {
|
|
margin-left: 0.5em;
|
|
}
|
|
.emoji-picker {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
margin: 0 !important;
|
|
z-index: 100;
|
|
background-color: #121a24;
|
|
background-color: var(--popover, #121a24);
|
|
color: #d8a070;
|
|
color: var(--popoverText, #d8a070);
|
|
--lightText: var(--popoverLightText, $fallback--faint);
|
|
--faint: var(--popoverFaintText, $fallback--faint);
|
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
|
--icon: var(--popoverIcon, $fallback--icon);
|
|
}
|
|
.emoji-picker .keep-open,
|
|
.emoji-picker .too-many-emoji {
|
|
padding: 7px;
|
|
line-height: normal;
|
|
}
|
|
.emoji-picker .too-many-emoji {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.emoji-picker .keep-open-label {
|
|
padding: 0 7px;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.emoji-picker .heading {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
height: 32px;
|
|
padding: 10px 7px 5px;
|
|
}
|
|
.emoji-picker .content {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
min-height: 0px;
|
|
}
|
|
.emoji-picker .emoji-tabs {
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
}
|
|
.emoji-picker .emoji-groups {
|
|
min-height: 200px;
|
|
}
|
|
.emoji-picker .additional-tabs {
|
|
border-left: 1px solid;
|
|
border-left-color: #666;
|
|
border-left-color: var(--icon, #666);
|
|
padding-left: 7px;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
.emoji-picker .additional-tabs,
|
|
.emoji-picker .emoji-tabs {
|
|
display: block;
|
|
min-width: 0;
|
|
-ms-flex-preferred-size: auto;
|
|
flex-basis: auto;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.emoji-picker .additional-tabs-item,
|
|
.emoji-picker .emoji-tabs-item {
|
|
padding: 0 7px;
|
|
cursor: pointer;
|
|
font-size: 1.85em;
|
|
}
|
|
.emoji-picker .additional-tabs-item.disabled,
|
|
.emoji-picker .emoji-tabs-item.disabled {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
.emoji-picker .additional-tabs-item.active,
|
|
.emoji-picker .emoji-tabs-item.active {
|
|
border-bottom: 4px solid;
|
|
}
|
|
.emoji-picker .additional-tabs-item.active svg,
|
|
.emoji-picker .emoji-tabs-item.active svg {
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
.emoji-picker .sticker-picker {
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
.emoji-picker .stickers-content,
|
|
.emoji-picker .emoji-content {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
.emoji-picker .stickers-content.hidden,
|
|
.emoji-picker .emoji-content.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
.emoji-picker .emoji-search {
|
|
padding: 5px;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
.emoji-picker .emoji-search input {
|
|
width: 100%;
|
|
}
|
|
.emoji-picker .emoji-groups {
|
|
-ms-flex: 1 1 1px;
|
|
flex: 1 1 1px;
|
|
position: relative;
|
|
overflow: auto;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white);
|
|
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white);
|
|
transition: -webkit-mask-size 150ms;
|
|
transition: mask-size 150ms;
|
|
transition: mask-size 150ms, -webkit-mask-size 150ms;
|
|
-webkit-mask-size: 100% 20px, 100% 20px, auto;
|
|
mask-size: 100% 20px, 100% 20px, auto;
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
.emoji-picker .emoji-groups.scrolled-top {
|
|
-webkit-mask-size: 100% 20px, 100% 0, auto;
|
|
mask-size: 100% 20px, 100% 0, auto;
|
|
}
|
|
.emoji-picker .emoji-groups.scrolled-bottom {
|
|
-webkit-mask-size: 100% 0, 100% 20px, auto;
|
|
mask-size: 100% 0, 100% 20px, auto;
|
|
}
|
|
.emoji-picker .emoji-group {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
padding-left: 5px;
|
|
-ms-flex-pack: left;
|
|
justify-content: left;
|
|
}
|
|
.emoji-picker .emoji-group-title {
|
|
font-size: 0.85em;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
.emoji-picker .emoji-group-title.disabled {
|
|
display: none;
|
|
}
|
|
.emoji-picker .emoji-item {
|
|
width: 32px;
|
|
height: 32px;
|
|
box-sizing: border-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
font-size: 32px;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
margin: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.emoji-picker .emoji-item img {
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.emoji-input {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
.emoji-input.with-picker input {
|
|
padding-right: 30px;
|
|
}
|
|
.emoji-input .emoji-picker-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 0.2em 0.25em;
|
|
font-size: 1.3em;
|
|
cursor: pointer;
|
|
line-height: 24px;
|
|
}
|
|
.emoji-input .emoji-picker-icon:hover i {
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.emoji-input .emoji-picker-panel {
|
|
position: absolute;
|
|
z-index: 20;
|
|
margin-top: 2px;
|
|
}
|
|
.emoji-input .emoji-picker-panel.hide {
|
|
display: none;
|
|
}
|
|
.emoji-input .autocomplete-panel {
|
|
position: absolute;
|
|
z-index: 20;
|
|
margin-top: 2px;
|
|
}
|
|
.emoji-input .autocomplete-panel.hide {
|
|
display: none;
|
|
}
|
|
.emoji-input .autocomplete-panel-body {
|
|
margin: 0 0.5em 0 0.5em;
|
|
border-radius: 5px;
|
|
border-radius: var(--tooltipRadius, 5px);
|
|
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
|
box-shadow: var(--popupShadow);
|
|
min-width: 75%;
|
|
background-color: #121a24;
|
|
background-color: var(--popover, #121a24);
|
|
color: #d8a070;
|
|
color: var(--popoverText, #d8a070);
|
|
--faint: var(--popoverFaintText, $fallback--faint);
|
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
|
--postLink: var(--popoverPostLink, $fallback--link);
|
|
--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
|
|
--icon: var(--popoverIcon, $fallback--icon);
|
|
}
|
|
.emoji-input .autocomplete-item {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
cursor: pointer;
|
|
padding: 0.2em 0.4em;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
|
|
height: 32px;
|
|
}
|
|
.emoji-input .autocomplete-item .image {
|
|
width: 32px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
font-size: 32px;
|
|
margin-right: 4px;
|
|
}
|
|
.emoji-input .autocomplete-item .image img {
|
|
width: 32px;
|
|
height: 32px;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
}
|
|
.emoji-input .autocomplete-item .label {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
margin: 0 0.1em 0 0.2em;
|
|
}
|
|
.emoji-input .autocomplete-item .label .displayText {
|
|
line-height: 1.5;
|
|
}
|
|
.emoji-input .autocomplete-item .label .detailText {
|
|
font-size: 9px;
|
|
line-height: 9px;
|
|
}
|
|
.emoji-input .autocomplete-item.highlighted {
|
|
background-color: #182230;
|
|
background-color: var(--selectedMenuPopover, #182230);
|
|
color: var(--selectedMenuPopoverText, #b9b9ba);
|
|
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
|
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
|
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
|
}
|
|
.emoji-input input, .emoji-input textarea {
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
}
|
|
/* TODO fix order of styles */
|
|
label.Select {
|
|
padding: 0;
|
|
}
|
|
label.Select select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background: transparent;
|
|
border: none;
|
|
color: #b9b9ba;
|
|
color: var(--inputText, --text, #b9b9ba);
|
|
margin: 0;
|
|
padding: 0 2em 0 0.2em;
|
|
font-family: sans-serif;
|
|
font-family: var(--inputFont, sans-serif);
|
|
font-size: 1em;
|
|
width: 100%;
|
|
z-index: 1;
|
|
height: 2em;
|
|
line-height: 16px;
|
|
}
|
|
label.Select .select-down-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 5px;
|
|
height: 100%;
|
|
width: 0.875em;
|
|
color: #b9b9ba;
|
|
color: var(--inputText, #b9b9ba);
|
|
line-height: 2;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
.poll-form {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding: 0 0.5em 0.5em;
|
|
}
|
|
.poll-form .add-option {
|
|
-ms-flex-item-align: start;
|
|
align-self: flex-start;
|
|
padding-top: 0.25em;
|
|
padding-left: 0.1em;
|
|
}
|
|
.poll-form .poll-option {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: baseline;
|
|
align-items: baseline;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
.poll-form .input-container {
|
|
width: 100%;
|
|
}
|
|
.poll-form .input-container input {
|
|
padding-right: 2.5em;
|
|
width: 100%;
|
|
}
|
|
.poll-form .delete-option {
|
|
width: 1.5em;
|
|
margin-left: -1.5em;
|
|
z-index: 1;
|
|
}
|
|
.poll-form .poll-type-expiry {
|
|
margin-top: 0.5em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.poll-form .poll-type {
|
|
margin-right: 0.75em;
|
|
-ms-flex: 1 1 60%;
|
|
flex: 1 1 60%;
|
|
}
|
|
.poll-form .poll-type .poll-type-select {
|
|
padding-right: 0.75em;
|
|
}
|
|
.poll-form .poll-expiry {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.poll-form .poll-expiry .expiry-amount {
|
|
width: 3em;
|
|
text-align: right;
|
|
}
|
|
.still-image {
|
|
position: relative;
|
|
line-height: 0;
|
|
overflow: hidden;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.still-image canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
visibility: var(--_still-image-canvas-visibility, visible);
|
|
}
|
|
.still-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
}
|
|
.still-image.animated::before {
|
|
zoom: var(--_still_image-label-scale, 1);
|
|
content: "gif";
|
|
position: absolute;
|
|
line-height: 1;
|
|
font-size: 0.7em;
|
|
top: 0.5em;
|
|
left: 0.5em;
|
|
background: rgba(127, 127, 127, 0.5);
|
|
color: #fff;
|
|
display: block;
|
|
padding: 2px 4px;
|
|
border-radius: 5px;
|
|
border-radius: var(--tooltipRadius, 5px);
|
|
z-index: 2;
|
|
visibility: var(--_still-image-label-visibility, visible);
|
|
}
|
|
.still-image.animated:hover canvas {
|
|
display: none;
|
|
}
|
|
.still-image.animated:hover::before {
|
|
visibility: var(--_still-image-label-visibility, hidden);
|
|
}
|
|
.still-image.animated img {
|
|
visibility: var(--_still-image-img-visibility, hidden);
|
|
}
|
|
.still-image.animated:hover img {
|
|
visibility: visible;
|
|
}
|
|
.Flash {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.Flash .player {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.Flash .placeholder {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
background: var(--bg);
|
|
color: var(--link);
|
|
}
|
|
.Flash .hider {
|
|
top: 0;
|
|
}
|
|
.Flash .label {
|
|
text-align: center;
|
|
-ms-flex: 1 1 0px;
|
|
flex: 1 1 0;
|
|
line-height: 1.2;
|
|
white-space: normal;
|
|
word-wrap: normal;
|
|
}
|
|
.Flash .hidden {
|
|
display: none;
|
|
visibility: "hidden";
|
|
}
|
|
.Attachment {
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
position: relative;
|
|
-ms-flex-item-align: start;
|
|
align-self: flex-start;
|
|
line-height: 0;
|
|
height: 100%;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 10px;
|
|
border-radius: var(--attachmentRadius, 10px);
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
}
|
|
.Attachment .attachment-wrapper {
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.Attachment .description-container {
|
|
-ms-flex: 0 1 0px;
|
|
flex: 0 1 0;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding-top: 0.5em;
|
|
z-index: 1;
|
|
}
|
|
.Attachment .description-container p {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
padding: 0.5em;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.Attachment .description-container.-static {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding-top: 0;
|
|
background: var(--popover);
|
|
box-shadow: var(--popupShadow);
|
|
}
|
|
.Attachment .description-field {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.Attachment .placeholder-container, .Attachment .image-container, .Attachment .audio-container, .Attachment .video-container, .Attachment .flash-container, .Attachment .oembed-container {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.Attachment .image-container .image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.Attachment .flash-container .flash, .Attachment .flash-container video, .Attachment .video-container .flash, .Attachment .video-container video {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
-ms-flex-item-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
}
|
|
.Attachment .audio-container {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: end;
|
|
align-items: flex-end;
|
|
}
|
|
.Attachment .audio-container audio {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.Attachment .placeholder-container {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
padding-top: 0.5em;
|
|
}
|
|
.Attachment .play-icon {
|
|
position: absolute;
|
|
font-size: 64px;
|
|
top: calc(50% - 32px);
|
|
left: calc(50% - 32px);
|
|
color: rgba(255, 255, 255, 0.75);
|
|
text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.Attachment .play-icon::before {
|
|
margin: 0;
|
|
}
|
|
.Attachment .attachment-buttons {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
margin-top: 0.5em;
|
|
margin-right: 0.5em;
|
|
z-index: 1;
|
|
}
|
|
.Attachment .attachment-buttons .attachment-button {
|
|
padding: 0;
|
|
border-radius: 5px;
|
|
border-radius: var(--tooltipRadius, 5px);
|
|
text-align: center;
|
|
width: 2em;
|
|
height: 2em;
|
|
margin-left: 0.5em;
|
|
font-size: 1.25em;
|
|
background: rgba(230, 230, 230, 0.7);
|
|
}
|
|
.Attachment .attachment-buttons .attachment-button .svg-inline--fa {
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.Attachment .attachment-buttons .attachment-button:hover .svg-inline--fa {
|
|
color: rgba(0, 0, 0, 0.9);
|
|
}
|
|
.Attachment .oembed-container {
|
|
line-height: 1.2em;
|
|
-ms-flex: 1 0 100%;
|
|
flex: 1 0 100%;
|
|
width: 100%;
|
|
margin-right: 15px;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.Attachment .oembed-container img {
|
|
width: 100%;
|
|
}
|
|
.Attachment .oembed-container .image {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.Attachment .oembed-container .image img {
|
|
border: 0px;
|
|
border-radius: 5px;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.Attachment .oembed-container .text {
|
|
-ms-flex: 2;
|
|
flex: 2;
|
|
margin: 8px;
|
|
word-break: break-all;
|
|
}
|
|
.Attachment .oembed-container .text h1 {
|
|
font-size: 1rem;
|
|
margin: 0px;
|
|
}
|
|
.Attachment.-size-small .play-icon {
|
|
zoom: 0.5;
|
|
opacity: 0.7;
|
|
}
|
|
.Attachment.-size-small .attachment-buttons {
|
|
zoom: 0.7;
|
|
opacity: 0.5;
|
|
}
|
|
.Attachment.-editable {
|
|
padding: 0.5em;
|
|
}
|
|
.Attachment.-editable .description-container, .Attachment.-editable .attachment-buttons {
|
|
margin: 0;
|
|
}
|
|
.Attachment.-placeholder {
|
|
display: inline-block;
|
|
color: #d8a070;
|
|
color: var(--postLink, #d8a070);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
height: auto;
|
|
line-height: 1.5;
|
|
}
|
|
.Attachment.-placeholder:not(.-editable) {
|
|
border: none;
|
|
}
|
|
.Attachment.-placeholder.-editable {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-align: baseline;
|
|
align-items: baseline;
|
|
}
|
|
.Attachment.-placeholder.-editable .description-container, .Attachment.-placeholder.-editable .attachment-buttons {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
.Attachment.-placeholder.-editable .description-container {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
padding-left: 0.5em;
|
|
}
|
|
.Attachment.-placeholder.-editable .attachment-buttons {
|
|
-ms-flex-order: 99;
|
|
order: 99;
|
|
-ms-flex-item-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
}
|
|
.Attachment.-placeholder a {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.Attachment.-placeholder svg {
|
|
color: inherit;
|
|
}
|
|
.Attachment.-loading {
|
|
cursor: progress;
|
|
}
|
|
.Attachment.-contain-fit img,
|
|
.Attachment.-contain-fit canvas {
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
}
|
|
.Attachment.-cover-fit img,
|
|
.Attachment.-cover-fit canvas {
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.Gallery .gallery-rows {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.Gallery .gallery-row {
|
|
position: relative;
|
|
height: 0;
|
|
width: 100%;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
}
|
|
.Gallery .gallery-row:not(:first-child) {
|
|
margin-top: 0.5em;
|
|
}
|
|
.Gallery.-long .gallery-rows {
|
|
max-height: 25em;
|
|
overflow: hidden;
|
|
-webkit-mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white);
|
|
mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white);
|
|
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
.Gallery .many-attachments-text {
|
|
text-align: center;
|
|
line-height: 2;
|
|
}
|
|
.Gallery .many-attachments-buttons {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.Gallery .many-attachments-button {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
line-height: 2;
|
|
}
|
|
.Gallery .many-attachments-button button {
|
|
padding: 0 2em;
|
|
}
|
|
.Gallery .gallery-row.-grid, .Gallery .gallery-row.-minimal {
|
|
height: auto;
|
|
}
|
|
.Gallery .gallery-row.-grid .gallery-row-inner, .Gallery .gallery-row.-minimal .gallery-row-inner {
|
|
position: relative;
|
|
}
|
|
.Gallery .gallery-row-inner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
-ms-flex-line-pack: stretch;
|
|
align-content: stretch;
|
|
}
|
|
.Gallery .gallery-row-inner.-grid {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-column-gap: 0.5em;
|
|
grid-row-gap: 0.5em;
|
|
-ms-grid-columns: (minmax(15em, 1fr))[auto-fill];
|
|
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
|
|
}
|
|
.Gallery .gallery-row-inner.-grid .gallery-item {
|
|
margin: 0;
|
|
height: 200px;
|
|
}
|
|
.Gallery .gallery-item {
|
|
margin: 0 0.5em 0 0;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
min-width: 2em;
|
|
}
|
|
.Gallery .gallery-item:last-child {
|
|
margin: 0;
|
|
}
|
|
.Avatar {
|
|
--_avatarShadowBox: var(--avatarStatusShadow);
|
|
--_avatarShadowFilter: var(--avatarStatusShadowFilter);
|
|
--_avatarShadowInset: var(--avatarStatusShadowInset);
|
|
--_still-image-label-visibility: hidden;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
.Avatar.-compact {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 10px;
|
|
border-radius: var(--avatarAltRadius, 10px);
|
|
}
|
|
.Avatar .avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: var(--_avatarShadowBox);
|
|
border-radius: 4px;
|
|
border-radius: var(--avatarRadius, 4px);
|
|
}
|
|
.Avatar .avatar.-better-shadow {
|
|
box-shadow: var(--_avatarShadowInset);
|
|
filter: var(--_avatarShadowFilter);
|
|
}
|
|
.Avatar .avatar.-animated::before {
|
|
display: none;
|
|
}
|
|
.Avatar .avatar.-compact {
|
|
border-radius: 10px;
|
|
border-radius: var(--avatarAltRadius, 10px);
|
|
}
|
|
.Avatar .avatar.-placeholder {
|
|
background-color: #182230;
|
|
background-color: var(--fg, #182230);
|
|
}
|
|
.Avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.Avatar .bot-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: -0.2em;
|
|
padding: 0.2em;
|
|
background: rgba(127, 127, 127, 0.5);
|
|
color: #fff;
|
|
border-radius: var(--tooltipRadius);
|
|
}
|
|
.MentionLink {
|
|
position: relative;
|
|
white-space: normal;
|
|
display: inline;
|
|
color: var(--link);
|
|
word-break: normal;
|
|
}
|
|
.MentionLink .new, .MentionLink .original {
|
|
display: inline;
|
|
border-radius: 2px;
|
|
}
|
|
.MentionLink .mention-avatar {
|
|
border-radius: var(--avatarAltRadius, 10px);
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
vertical-align: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
margin-right: 0.2em;
|
|
}
|
|
.MentionLink .full {
|
|
position: absolute;
|
|
display: inline-block;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
top: 100%;
|
|
left: 0;
|
|
height: 100%;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
transition: opacity 0.2s ease;
|
|
z-index: 1;
|
|
margin-top: 0.25em;
|
|
padding: 0.5em;
|
|
-webkit-user-select: all;
|
|
-moz-user-select: all;
|
|
-ms-user-select: all;
|
|
user-select: all;
|
|
}
|
|
.MentionLink .short.-with-tooltip, .MentionLink .you {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.MentionLink .short, .MentionLink .full {
|
|
white-space: nowrap;
|
|
}
|
|
.MentionLink .shortName {
|
|
white-space: normal;
|
|
}
|
|
.MentionLink .new .at {
|
|
color: var(--link);
|
|
opacity: 0.8;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
padding: 0 0.1em;
|
|
vertical-align: -25%;
|
|
margin: 0;
|
|
}
|
|
.MentionLink .new.-striped .shortName, .MentionLink .new.-striped .full {
|
|
background-image: repeating-linear-gradient(135deg, var(--____highlight-tintColor), var(--____highlight-tintColor) 5px, var(--____highlight-tintColor2) 5px, var(--____highlight-tintColor2) 10px);
|
|
}
|
|
.MentionLink .new.-solid .shortName, .MentionLink .new.-solid .full {
|
|
background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
|
|
}
|
|
.MentionLink .new.-side .shortName, .MentionLink .new.-side .userNameFull {
|
|
box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
|
|
}
|
|
.MentionLink:hover .new .full {
|
|
opacity: 1;
|
|
pointer-events: initial;
|
|
}
|
|
.MentionLink .serverName.-faded {
|
|
color: var(--faintLink, #d8a070);
|
|
}
|
|
.MentionLink .full .-faded {
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.MentionsLine {
|
|
word-break: break-all;
|
|
}
|
|
.MentionsLine .mention-link:not(:first-child)::before {
|
|
content: " ";
|
|
}
|
|
.MentionsLine .showMoreLess {
|
|
margin-left: 0.5em;
|
|
white-space: normal;
|
|
color: var(--link);
|
|
}
|
|
.HashtagLink {
|
|
position: relative;
|
|
white-space: normal;
|
|
display: inline-block;
|
|
color: var(--link);
|
|
}
|
|
.RichContent blockquote {
|
|
margin: 0.2em 0 0.2em 2em;
|
|
font-style: italic;
|
|
}
|
|
.RichContent pre {
|
|
overflow: auto;
|
|
}
|
|
.RichContent code,
|
|
.RichContent samp,
|
|
.RichContent kbd,
|
|
.RichContent var,
|
|
.RichContent pre {
|
|
font-family: var(--postCodeFont, monospace);
|
|
}
|
|
.RichContent p {
|
|
margin: 0 0 1em 0;
|
|
}
|
|
.RichContent p:last-child {
|
|
margin: 0 0 0 0;
|
|
}
|
|
.RichContent h1 {
|
|
font-size: 1.1em;
|
|
line-height: 1.2em;
|
|
margin: 1.4em 0;
|
|
}
|
|
.RichContent h2 {
|
|
font-size: 1.1em;
|
|
margin: 1em 0;
|
|
}
|
|
.RichContent h3 {
|
|
font-size: 1em;
|
|
margin: 1.2em 0;
|
|
}
|
|
.RichContent h4 {
|
|
margin: 1.1em 0;
|
|
}
|
|
.RichContent .img {
|
|
display: inline-block;
|
|
}
|
|
.RichContent .emoji {
|
|
display: inline-block;
|
|
width: var(--emoji-size, 32px);
|
|
height: var(--emoji-size, 32px);
|
|
}
|
|
.RichContent .img,
|
|
.RichContent video {
|
|
max-width: 100%;
|
|
max-height: 400px;
|
|
vertical-align: middle;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
}
|
|
.poll .votes {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
margin: 0 0 0.5em;
|
|
}
|
|
.poll .poll-option {
|
|
margin: 0.75em 0.5em;
|
|
}
|
|
.poll .option-result {
|
|
height: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
position: relative;
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
.poll .option-result-label {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
padding: 0.1em 0.25em;
|
|
z-index: 1;
|
|
word-break: break-word;
|
|
}
|
|
.poll .result-percentage {
|
|
width: 3.5em;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.poll .result-fill {
|
|
height: 100%;
|
|
position: absolute;
|
|
color: #b9b9ba;
|
|
color: var(--pollText, #b9b9ba);
|
|
background-color: #151e2a;
|
|
background-color: var(--poll, #151e2a);
|
|
border-radius: 10px;
|
|
border-radius: var(--panelRadius, 10px);
|
|
top: 0;
|
|
left: 0;
|
|
transition: width 0.5s;
|
|
}
|
|
.poll .option-vote {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.poll input {
|
|
width: 3.5em;
|
|
}
|
|
.poll .footer {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.poll.loading * {
|
|
cursor: progress;
|
|
}
|
|
.poll .poll-vote-button {
|
|
padding: 0 0.5em;
|
|
margin-right: 0.5em;
|
|
}
|
|
.StatusBody {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.StatusBody .emoji {
|
|
--_still_image-label-scale: 0.5;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.StatusBody .attachments {
|
|
margin-top: 0.5em;
|
|
}
|
|
.StatusBody .text, .StatusBody .summary {
|
|
font-family: var(--postFont, sans-serif);
|
|
white-space: pre-wrap;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
line-height: var(--post-line-height);
|
|
}
|
|
.StatusBody .summary {
|
|
display: block;
|
|
font-style: italic;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
.StatusBody .text.-single-line {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
height: 1.4em;
|
|
}
|
|
.StatusBody .summary-wrapper {
|
|
margin-bottom: 0.5em;
|
|
border-style: solid;
|
|
border-width: 0 0 1px 0;
|
|
border-color: var(--border, #222);
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
}
|
|
.StatusBody .summary-wrapper.-tall {
|
|
position: relative;
|
|
}
|
|
.StatusBody .summary-wrapper.-tall .summary {
|
|
max-height: 2em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.StatusBody .text-wrapper {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.StatusBody .text-wrapper.-tall-status {
|
|
position: relative;
|
|
height: 220px;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
z-index: 1;
|
|
}
|
|
.StatusBody .text-wrapper.-tall-status .media-body {
|
|
min-height: 0;
|
|
-webkit-mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white);
|
|
mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, linear-gradient(to top, white, white);
|
|
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
.StatusBody .tall-status-hider, .StatusBody .tall-subject-hider, .StatusBody .status-unhider, .StatusBody .cw-status-hider {
|
|
display: inline-block;
|
|
word-break: break-all;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.StatusBody .tall-status-hider {
|
|
position: absolute;
|
|
height: 70px;
|
|
margin-top: 150px;
|
|
line-height: 110px;
|
|
z-index: 2;
|
|
}
|
|
.StatusBody .tall-subject-hider {
|
|
padding-bottom: 0.5em;
|
|
}
|
|
.StatusBody .status-unhider, .StatusBody .cw-status-hider {
|
|
word-break: break-all;
|
|
}
|
|
.StatusBody .status-unhider svg, .StatusBody .cw-status-hider svg {
|
|
color: inherit;
|
|
}
|
|
.StatusBody .greentext {
|
|
color: #0fa00f;
|
|
color: var(--postGreentext, #0fa00f);
|
|
}
|
|
.StatusBody .cyantext {
|
|
color: var(--postCyantext, #0095ff);
|
|
}
|
|
.StatusBody.-compact {
|
|
-ms-flex-align: top;
|
|
align-items: top;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
--emoji-size: 16px;
|
|
}
|
|
.StatusBody.-compact .body, .StatusBody.-compact .attachments {
|
|
max-height: 3.25em;
|
|
}
|
|
.StatusBody.-compact .body {
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
min-width: 5em;
|
|
-ms-flex: 5 1 auto;
|
|
flex: 5 1 auto;
|
|
-webkit-mask-size: auto 3.5em, auto auto;
|
|
mask-size: auto 3.5em, auto auto;
|
|
-webkit-mask-position: 0 0, 0 0;
|
|
mask-position: 0 0, 0 0;
|
|
-webkit-mask-repeat: repeat-x, repeat;
|
|
mask-repeat: repeat-x, repeat;
|
|
-webkit-mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
|
|
mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
|
|
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
.StatusBody.-compact .attachments {
|
|
margin-top: 0;
|
|
-ms-flex: 1 1 0px;
|
|
flex: 1 1 0;
|
|
min-width: 5em;
|
|
height: 100%;
|
|
margin-left: 0.5em;
|
|
}
|
|
.StatusBody.-compact .summary-wrapper {
|
|
line-height: inherit;
|
|
margin: 0;
|
|
border: none;
|
|
display: inline-block;
|
|
}
|
|
.StatusBody.-compact .summary-wrapper .summary::after {
|
|
content: ": ";
|
|
}
|
|
.StatusBody.-compact .text-wrapper {
|
|
display: inline-block;
|
|
}
|
|
.link-preview-card {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
margin-top: 0.5em;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 10px;
|
|
border-radius: var(--attachmentRadius, 10px);
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
}
|
|
.link-preview-card .card-image {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
width: 120px;
|
|
max-width: 25%;
|
|
}
|
|
.link-preview-card .card-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
border-radius: var(--attachmentRadius, 10px);
|
|
}
|
|
.link-preview-card .card-content {
|
|
max-height: 100%;
|
|
margin: 0.5em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.link-preview-card .card-host {
|
|
font-size: 0.85em;
|
|
}
|
|
.link-preview-card .card-description {
|
|
margin: 0.5em 0 0 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: break-word;
|
|
line-height: 1.2em;
|
|
max-height: calc(1.2em * 3 - 1px);
|
|
}
|
|
.link-preview-card .nsfw-alert {
|
|
margin: 2em 0;
|
|
}
|
|
.StatusContent {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.StatusContent img.emoji, .StatusContent video.emoji {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
.post-status-form {
|
|
position: relative;
|
|
}
|
|
.post-status-form .attachments {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.post-status-form .form-bottom {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
padding: 0.5em;
|
|
height: 2.5em;
|
|
}
|
|
.post-status-form .form-bottom button {
|
|
width: 10em;
|
|
}
|
|
.post-status-form .form-bottom p {
|
|
margin: 0.35em;
|
|
padding: 0.35em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.post-status-form .form-bottom-left {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
padding-right: 7px;
|
|
margin-right: 7px;
|
|
max-width: 10em;
|
|
}
|
|
.post-status-form .preview-heading {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding-left: 0.5em;
|
|
}
|
|
.post-status-form .preview-toggle {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.post-status-form .preview-toggle:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.post-status-form .preview-toggle svg, .post-status-form .preview-toggle i {
|
|
margin-left: 0.2em;
|
|
font-size: 0.8em;
|
|
transform: rotate(90deg);
|
|
}
|
|
.post-status-form .preview-container {
|
|
margin-bottom: 1em;
|
|
}
|
|
.post-status-form .preview-error {
|
|
font-style: italic;
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.post-status-form .preview-status {
|
|
border: 1px solid #222;
|
|
border: 1px solid var(--border, #222);
|
|
border-radius: 5px;
|
|
border-radius: var(--tooltipRadius, 5px);
|
|
padding: 0.5em;
|
|
margin: 0;
|
|
}
|
|
.post-status-form .text-format .only-format {
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.post-status-form .visibility-tray {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
padding-top: 5px;
|
|
-ms-flex-align: baseline;
|
|
align-items: baseline;
|
|
}
|
|
.post-status-form .media-upload-icon, .post-status-form .poll-icon, .post-status-form .emoji-icon {
|
|
font-size: 1.85em;
|
|
line-height: 1.1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
padding: 0 0.1em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.post-status-form .media-upload-icon.selected svg, .post-status-form .media-upload-icon.selected i, .post-status-form .media-upload-icon.selected label, .post-status-form .media-upload-icon:hover svg, .post-status-form .media-upload-icon:hover i, .post-status-form .media-upload-icon:hover label, .post-status-form .poll-icon.selected svg, .post-status-form .poll-icon.selected i, .post-status-form .poll-icon.selected label, .post-status-form .poll-icon:hover svg, .post-status-form .poll-icon:hover i, .post-status-form .poll-icon:hover label, .post-status-form .emoji-icon.selected svg, .post-status-form .emoji-icon.selected i, .post-status-form .emoji-icon.selected label, .post-status-form .emoji-icon:hover svg, .post-status-form .emoji-icon:hover i, .post-status-form .emoji-icon:hover label {
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
.post-status-form .media-upload-icon.disabled svg, .post-status-form .media-upload-icon.disabled i, .post-status-form .poll-icon.disabled svg, .post-status-form .poll-icon.disabled i, .post-status-form .emoji-icon.disabled svg, .post-status-form .emoji-icon.disabled i {
|
|
cursor: not-allowed;
|
|
color: #666;
|
|
color: var(--btnDisabledText, #666);
|
|
}
|
|
.post-status-form .media-upload-icon.disabled svg:hover, .post-status-form .media-upload-icon.disabled i:hover, .post-status-form .poll-icon.disabled svg:hover, .post-status-form .poll-icon.disabled i:hover, .post-status-form .emoji-icon.disabled svg:hover, .post-status-form .emoji-icon.disabled i:hover {
|
|
color: #666;
|
|
color: var(--btnDisabledText, #666);
|
|
}
|
|
.post-status-form .media-upload-icon {
|
|
-ms-flex-order: 1;
|
|
order: 1;
|
|
-ms-flex-pack: left;
|
|
justify-content: left;
|
|
}
|
|
.post-status-form .emoji-icon {
|
|
-ms-flex-order: 2;
|
|
order: 2;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.post-status-form .poll-icon {
|
|
-ms-flex-order: 3;
|
|
order: 3;
|
|
-ms-flex-pack: right;
|
|
justify-content: right;
|
|
}
|
|
.post-status-form .error {
|
|
text-align: center;
|
|
}
|
|
.post-status-form .media-upload-wrapper {
|
|
margin-right: 0.2em;
|
|
margin-bottom: 0.5em;
|
|
width: 18em;
|
|
}
|
|
.post-status-form .media-upload-wrapper img, .post-status-form .media-upload-wrapper video {
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
max-height: 10em;
|
|
}
|
|
.post-status-form .media-upload-wrapper .video {
|
|
max-height: 10em;
|
|
}
|
|
.post-status-form .media-upload-wrapper input {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
.post-status-form .status-input-wrapper {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
position: relative;
|
|
width: 100%;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.post-status-form .btn[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
.post-status-form form {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
margin: 0.6em;
|
|
position: relative;
|
|
}
|
|
.post-status-form .form-group {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding: 0.25em 0.5em 0.5em;
|
|
line-height: 1.85;
|
|
}
|
|
.post-status-form .form-post-body {
|
|
box-sizing: content-box;
|
|
overflow: hidden;
|
|
transition: min-height 200ms 100ms;
|
|
padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
|
|
height: calc(var(--post-line-height) * 1em);
|
|
min-height: calc(var(--post-line-height) * 1em);
|
|
resize: none;
|
|
}
|
|
.post-status-form .form-post-body.scrollable-form {
|
|
overflow-y: auto;
|
|
}
|
|
.post-status-form .main-input {
|
|
position: relative;
|
|
}
|
|
.post-status-form .character-counter {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 0;
|
|
margin: 0 0.5em;
|
|
}
|
|
.post-status-form .character-counter.error {
|
|
color: #ff0000;
|
|
color: var(--cRed, #ff0000);
|
|
}
|
|
.post-status-form .btn[disabled] {
|
|
cursor: not-allowed;
|
|
}
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 0.6;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.post-status-form .drop-indicator {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 5em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
opacity: 0.6;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
border-radius: 5px;
|
|
border-radius: var(--tooltipRadius, 5px);
|
|
border: 2px dashed #b9b9ba;
|
|
border: 2px dashed var(--text, #b9b9ba);
|
|
}
|
|
.remote-follow {
|
|
max-width: 220px;
|
|
}
|
|
.remote-follow .remote-button {
|
|
width: 100%;
|
|
min-height: 2em;
|
|
}
|
|
.dark-overlay::before {
|
|
bottom: 0;
|
|
content: " ";
|
|
display: block;
|
|
cursor: default;
|
|
left: 0;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
background: rgba(27, 31, 35, 0.5);
|
|
z-index: 99;
|
|
}
|
|
.dialog-modal.panel {
|
|
top: 0;
|
|
left: 50%;
|
|
max-height: 80vh;
|
|
max-width: 90vw;
|
|
margin: 15vh auto;
|
|
position: fixed;
|
|
transform: translateX(-50%);
|
|
z-index: 999;
|
|
cursor: default;
|
|
display: block;
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
}
|
|
.dialog-modal.panel .dialog-modal-heading .title {
|
|
text-align: center;
|
|
}
|
|
.dialog-modal.panel .dialog-modal-content {
|
|
margin: 0;
|
|
padding: 1rem 1rem;
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
white-space: normal;
|
|
}
|
|
.dialog-modal.panel .dialog-modal-footer {
|
|
margin: 0;
|
|
padding: 0.5em 0.5em;
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
border-top: 1px solid #222;
|
|
border-top: 1px solid var(--border, #222);
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
.dialog-modal.panel .dialog-modal-footer button {
|
|
width: auto;
|
|
margin-left: 0.5rem;
|
|
}
|
|
@charset "UTF-8";
|
|
.popover-trigger-button {
|
|
display: inline-block;
|
|
}
|
|
.popover {
|
|
z-index: 500;
|
|
position: absolute;
|
|
min-width: 0;
|
|
}
|
|
.popover-default {
|
|
transition: opacity 0.3s;
|
|
border-radius: 4px;
|
|
border-radius: var(--btnRadius, 4px);
|
|
background-color: #121a24;
|
|
background-color: var(--popover, #121a24);
|
|
color: #b9b9ba;
|
|
color: var(--popoverText, #b9b9ba);
|
|
--faint: var(--popoverFaintText, $fallback--faint);
|
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
|
--postLink: var(--popoverPostLink, $fallback--link);
|
|
--postFaintLink: var(--popoverPostFaintLink, $fallback--link);
|
|
--icon: var(--popoverIcon, $fallback--icon);
|
|
}
|
|
.popover-default:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 3;
|
|
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
|
|
box-shadow: var(--panelShadow);
|
|
pointer-events: none;
|
|
}
|
|
.dropdown-menu {
|
|
display: block;
|
|
padding: 0.5rem 0;
|
|
font-size: 1em;
|
|
text-align: left;
|
|
list-style: none;
|
|
max-width: 100vw;
|
|
z-index: 200;
|
|
white-space: nowrap;
|
|
}
|
|
.dropdown-menu .dropdown-divider {
|
|
height: 0;
|
|
margin: 0.5rem 0;
|
|
overflow: hidden;
|
|
border-top: 1px solid #222;
|
|
border-top: 1px solid var(--border, #222);
|
|
}
|
|
.dropdown-menu .dropdown-item {
|
|
line-height: 21px;
|
|
overflow: hidden;
|
|
display: block;
|
|
padding: 0.5em 0.75em;
|
|
clear: both;
|
|
font-weight: 400;
|
|
text-align: inherit;
|
|
white-space: nowrap;
|
|
border: none;
|
|
border-radius: 0px;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
--btnText: var(--popoverText, $fallback--text);
|
|
}
|
|
.dropdown-menu .dropdown-item-icon svg {
|
|
width: 22px;
|
|
margin-right: 0.75rem;
|
|
color: var(--menuPopoverIcon, #666);
|
|
}
|
|
.dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item:hover {
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedMenuPopover, #151e2a);
|
|
box-shadow: none;
|
|
--btnText: var(--selectedMenuPopoverText, $fallback--link);
|
|
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
|
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
|
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
|
}
|
|
.dropdown-menu .dropdown-item:active svg, .dropdown-menu .dropdown-item:hover svg {
|
|
color: var(--selectedMenuPopoverIcon, #666);
|
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
|
}
|
|
.dropdown-menu .dropdown-item .menu-checkbox {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
min-width: 22px;
|
|
max-width: 22px;
|
|
min-height: 22px;
|
|
max-height: 22px;
|
|
line-height: 22px;
|
|
text-align: center;
|
|
border-radius: 0px;
|
|
background-color: #182230;
|
|
background-color: var(--input, #182230);
|
|
box-shadow: 0px 0px 2px black inset;
|
|
box-shadow: var(--inputShadow);
|
|
margin-right: 0.75em;
|
|
}
|
|
.dropdown-menu .dropdown-item .menu-checkbox.menu-checkbox-checked::after {
|
|
font-size: 1.25em;
|
|
content: "\2713";
|
|
}
|
|
.dropdown-menu .dropdown-item .menu-checkbox.-radio {
|
|
border-radius: 9999px;
|
|
}
|
|
.dropdown-menu .dropdown-item .menu-checkbox.-radio.menu-checkbox-checked::after {
|
|
font-size: 2em;
|
|
content: "\2022";
|
|
}
|
|
.dropdown-menu .button-default.dropdown-item,
|
|
.dropdown-menu .button-default.dropdown-item i[class*=icon-] {
|
|
color: #b9b9ba;
|
|
color: var(--btnText, #b9b9ba);
|
|
}
|
|
.dropdown-menu .button-default.dropdown-item:active {
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedMenuPopover, #151e2a);
|
|
color: #d8a070;
|
|
color: var(--selectedMenuPopoverText, #d8a070);
|
|
}
|
|
.dropdown-menu .button-default.dropdown-item:disabled {
|
|
color: #b9b9ba;
|
|
color: var(--btnDisabledText, #b9b9ba);
|
|
}
|
|
.dropdown-menu .button-default.dropdown-item.toggled {
|
|
color: #b9b9ba;
|
|
color: var(--btnToggledText, #b9b9ba);
|
|
}
|
|
.moderation-tools-popover {
|
|
height: 100%;
|
|
}
|
|
.moderation-tools-popover .trigger {
|
|
display: -ms-flexbox !important;
|
|
display: flex !important;
|
|
height: 100%;
|
|
}
|
|
.moderation-tools-button svg, .moderation-tools-button i {
|
|
font-size: 0.8em;
|
|
}
|
|
.AccountActions .ellipsis-button {
|
|
width: 2.5em;
|
|
margin: -0.5em 0;
|
|
padding: 0.5em 0;
|
|
text-align: center;
|
|
}
|
|
.AccountActions .ellipsis-button:not(:hover) .icon {
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
.user-card {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.user-card:hover {
|
|
--_still-image-img-visibility: visible;
|
|
--_still-image-canvas-visibility: hidden;
|
|
--_still-image-label-visibility: hidden;
|
|
}
|
|
.user-card .panel-heading {
|
|
padding: 0.5em 0;
|
|
text-align: center;
|
|
box-shadow: none;
|
|
background: transparent;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
position: relative;
|
|
}
|
|
.user-card .panel-body {
|
|
word-wrap: break-word;
|
|
border-bottom-right-radius: inherit;
|
|
border-bottom-left-radius: inherit;
|
|
position: relative;
|
|
}
|
|
.user-card .background-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
-webkit-mask: linear-gradient(to top, white, transparent) bottom no-repeat, linear-gradient(to top, white, white);
|
|
mask: linear-gradient(to top, white, transparent) bottom no-repeat, linear-gradient(to top, white, white);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
background-size: cover;
|
|
-webkit-mask-size: 100% 60%;
|
|
mask-size: 100% 60%;
|
|
border-top-left-radius: calc(var(--panelRadius) - 1px);
|
|
border-top-right-radius: calc(var(--panelRadius) - 1px);
|
|
background-color: var(--profileBg);
|
|
z-index: -2;
|
|
}
|
|
.user-card .background-image.hide-bio {
|
|
-webkit-mask-size: 100% 40px;
|
|
mask-size: 100% 40px;
|
|
}
|
|
.user-card-bio {
|
|
text-align: center;
|
|
display: block;
|
|
line-height: 1.3;
|
|
padding: 1em;
|
|
margin: 0;
|
|
}
|
|
.user-card-bio a {
|
|
color: #d8a070;
|
|
color: var(--postLink, #d8a070);
|
|
}
|
|
.user-card-bio img {
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
vertical-align: middle;
|
|
max-width: 100%;
|
|
max-height: 400px;
|
|
}
|
|
.user-card-rounded-t {
|
|
border-top-left-radius: 10px;
|
|
border-top-left-radius: var(--panelRadius, 10px);
|
|
border-top-right-radius: 10px;
|
|
border-top-right-radius: var(--panelRadius, 10px);
|
|
}
|
|
.user-card-rounded {
|
|
border-radius: 10px;
|
|
border-radius: var(--panelRadius, 10px);
|
|
}
|
|
.user-card-bordered {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
}
|
|
.user-info {
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
padding: 0 26px;
|
|
}
|
|
.user-info .container {
|
|
min-width: 0;
|
|
padding: 16px 0 6px;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
max-height: 56px;
|
|
}
|
|
.user-info .container > * {
|
|
min-width: 0;
|
|
}
|
|
.user-info .container .Avatar {
|
|
--_avatarShadowBox: var(--avatarShadow);
|
|
--_avatarShadowFilter: var(--avatarShadowFilter);
|
|
--_avatarShadowInset: var(--avatarShadowInset);
|
|
-ms-flex: 1 0 100%;
|
|
flex: 1 0 100%;
|
|
width: 56px;
|
|
height: 56px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
.user-info-avatar-link {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.user-info-avatar-link-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
border-radius: 4px;
|
|
border-radius: var(--avatarRadius, 4px);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.user-info-avatar-link-overlay svg {
|
|
color: #FFF;
|
|
}
|
|
.user-info-avatar-link:hover .user-info-avatar-link-overlay {
|
|
opacity: 1;
|
|
}
|
|
.user-info .external-link-button, .user-info .edit-profile-button {
|
|
cursor: pointer;
|
|
width: 2.5em;
|
|
text-align: center;
|
|
margin: -0.5em 0;
|
|
padding: 0.5em 0;
|
|
}
|
|
.user-info .external-link-button:not(:hover) .icon, .user-info .edit-profile-button:not(:hover) .icon {
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
.user-info .user-summary {
|
|
display: block;
|
|
margin-left: 0.6em;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
-ms-flex: 1 1 0px;
|
|
flex: 1 1 0;
|
|
z-index: 1;
|
|
line-height: 2em;
|
|
--emoji-size: 1.7em;
|
|
}
|
|
.user-info .user-summary .top-line,
|
|
.user-info .user-summary .bottom-line {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.user-info .user-name {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
margin-right: 1em;
|
|
font-size: 1.1em;
|
|
}
|
|
.user-info .bottom-line {
|
|
font-weight: light;
|
|
font-size: 1.1em;
|
|
-ms-flex-align: baseline;
|
|
align-items: baseline;
|
|
}
|
|
.user-info .bottom-line .lock-icon {
|
|
margin-left: 0.5em;
|
|
}
|
|
.user-info .bottom-line .user-screen-name {
|
|
min-width: 1px;
|
|
-ms-flex: 0 1 auto;
|
|
flex: 0 1 auto;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
.user-info .bottom-line .dailyAvg {
|
|
min-width: 1px;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
margin-left: 1em;
|
|
font-size: 0.7em;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.user-info .bottom-line .user-role {
|
|
-ms-flex: none;
|
|
flex: none;
|
|
color: #b9b9ba;
|
|
color: var(--alertNeutralText, #b9b9ba);
|
|
background-color: #182230;
|
|
background-color: var(--alertNeutral, #182230);
|
|
}
|
|
.user-info .user-meta {
|
|
margin-bottom: 0.15em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: baseline;
|
|
align-items: baseline;
|
|
line-height: 22px;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.user-info .user-meta .following {
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
margin: 0;
|
|
margin-bottom: 0.25em;
|
|
text-align: left;
|
|
}
|
|
.user-info .user-meta .highlighter {
|
|
-ms-flex: 0 1 auto;
|
|
flex: 0 1 auto;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
margin-right: -0.5em;
|
|
-ms-flex-item-align: start;
|
|
align-self: start;
|
|
}
|
|
.user-info .user-meta .highlighter .userHighlightCl {
|
|
padding: 2px 10px;
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
}
|
|
.user-info .user-meta .highlighter .userHighlightSel {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
}
|
|
.user-info .user-meta .highlighter .userHighlightText {
|
|
width: 70px;
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
}
|
|
.user-info .user-meta .highlighter .userHighlightCl,
|
|
.user-info .user-meta .highlighter .userHighlightText,
|
|
.user-info .user-meta .highlighter .userHighlightSel {
|
|
vertical-align: top;
|
|
margin-right: 0.5em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
.user-info .user-interactions {
|
|
position: relative;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-flow: row wrap;
|
|
flex-flow: row wrap;
|
|
margin-right: -0.75em;
|
|
}
|
|
.user-info .user-interactions > * {
|
|
margin: 0 0.75em 0.6em 0;
|
|
white-space: nowrap;
|
|
min-width: 95px;
|
|
}
|
|
.user-info .user-interactions button {
|
|
margin: 0;
|
|
}
|
|
.sidebar .edit-profile-button {
|
|
display: none;
|
|
}
|
|
.user-counts {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
line-height: 16px;
|
|
padding: 0.5em 1.5em 0em 1.5em;
|
|
text-align: center;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.user-count {
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
padding: 0.5em 0 0.5em 0;
|
|
margin: 0 0.5em;
|
|
}
|
|
.user-count h5 {
|
|
font-size: 1em;
|
|
font-weight: bolder;
|
|
margin: 0 0 0.25em;
|
|
}
|
|
.user-count a {
|
|
text-decoration: none;
|
|
}
|
|
.user-panel .signed-in {
|
|
overflow: visible;
|
|
z-index: 10;
|
|
}
|
|
.NavPanel .panel {
|
|
overflow: hidden;
|
|
box-shadow: var(--panelShadow);
|
|
}
|
|
.NavPanel ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.NavPanel li {
|
|
position: relative;
|
|
border-bottom: 1px solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
padding: 0;
|
|
}
|
|
.NavPanel li:first-child .menu-item {
|
|
border-top-right-radius: 10px;
|
|
border-top-right-radius: var(--panelRadius, 10px);
|
|
border-top-left-radius: 10px;
|
|
border-top-left-radius: var(--panelRadius, 10px);
|
|
}
|
|
.NavPanel li:last-child .menu-item {
|
|
border-bottom-right-radius: 10px;
|
|
border-bottom-right-radius: var(--panelRadius, 10px);
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-left-radius: var(--panelRadius, 10px);
|
|
}
|
|
.NavPanel li:last-child {
|
|
border: none;
|
|
}
|
|
.NavPanel .menu-item {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
height: 3.5em;
|
|
line-height: 3.5em;
|
|
padding: 0 1em;
|
|
width: 100%;
|
|
color: #d8a070;
|
|
color: var(--link, #d8a070);
|
|
}
|
|
.NavPanel .menu-item:hover {
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedMenu, #151e2a);
|
|
color: #d8a070;
|
|
color: var(--selectedMenuText, #d8a070);
|
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
|
--icon: var(--selectedMenuIcon, $fallback--icon);
|
|
}
|
|
.NavPanel .menu-item.router-link-active {
|
|
font-weight: bolder;
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedMenu, #151e2a);
|
|
color: #b9b9ba;
|
|
color: var(--selectedMenuText, #b9b9ba);
|
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
|
--icon: var(--selectedMenuIcon, $fallback--icon);
|
|
}
|
|
.NavPanel .menu-item.router-link-active:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.NavPanel .timelines-chevron {
|
|
margin-left: 0.8em;
|
|
font-size: 1.1em;
|
|
}
|
|
.NavPanel .timelines-background {
|
|
padding: 0 0 0 0.6em;
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedMenu, #151e2a);
|
|
border-top: 1px solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
}
|
|
.NavPanel .timelines {
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
}
|
|
.NavPanel .fa-scale-110 {
|
|
margin-right: 0.8em;
|
|
}
|
|
.NavPanel .badge {
|
|
position: absolute;
|
|
right: 0.6rem;
|
|
top: 1.25em;
|
|
}
|
|
.features-panel li {
|
|
line-height: 24px;
|
|
}
|
|
.who-to-follow * {
|
|
vertical-align: middle;
|
|
}
|
|
.who-to-follow img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.who-to-follow {
|
|
padding: 0em 1em;
|
|
margin: 0px;
|
|
}
|
|
.who-to-follow-items {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0px;
|
|
margin: 1em 0em;
|
|
}
|
|
.who-to-follow-more {
|
|
padding: 0px;
|
|
margin: 1em 0em;
|
|
text-align: center;
|
|
}
|
|
.floating-shout {
|
|
position: fixed;
|
|
bottom: 0.5em;
|
|
z-index: 1000;
|
|
max-width: 25em;
|
|
}
|
|
.floating-shout.-left {
|
|
left: 0.5em;
|
|
}
|
|
.floating-shout:not(.-left) {
|
|
right: 0.5em;
|
|
}
|
|
.shout-panel .shout-heading {
|
|
cursor: pointer;
|
|
}
|
|
.shout-panel .shout-heading .icon {
|
|
color: #b9b9ba;
|
|
color: var(--panelText, #b9b9ba);
|
|
margin-right: 0.5em;
|
|
}
|
|
.shout-panel .shout-heading .title {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.shout-panel .shout-window {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: 20em;
|
|
}
|
|
.shout-panel .shout-window-container {
|
|
height: 100%;
|
|
}
|
|
.shout-panel .shout-message {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: 0.2em 0.5em;
|
|
}
|
|
.shout-panel .shout-avatar img {
|
|
height: 24px;
|
|
width: 24px;
|
|
border-radius: 4px;
|
|
border-radius: var(--avatarRadius, 4px);
|
|
margin-right: 0.5em;
|
|
margin-top: 0.25em;
|
|
}
|
|
.shout-panel .shout-input {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.shout-panel .shout-input textarea {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
margin: 0.6em;
|
|
min-height: 3.5em;
|
|
resize: none;
|
|
}
|
|
.shout-panel .shout-panel .title {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.modal-view {
|
|
z-index: 2000;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
overflow: auto;
|
|
pointer-events: none;
|
|
animation-duration: 0.2s;
|
|
animation-name: modal-background-fadein;
|
|
opacity: 0;
|
|
}
|
|
.modal-view > * {
|
|
pointer-events: initial;
|
|
}
|
|
.modal-view.modal-background {
|
|
pointer-events: initial;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.modal-view.open {
|
|
opacity: 1;
|
|
}
|
|
@keyframes modal-background-fadein {
|
|
from {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
to {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
.panel-loading {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
height: 100%;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
font-size: 2em;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.panel-loading .loading-text svg {
|
|
line-height: 0;
|
|
vertical-align: middle;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.async-component-error {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
height: 100%;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.async-component-error .btn {
|
|
margin: 0.5em;
|
|
padding: 0.5em 2em;
|
|
}
|
|
.settings-modal {
|
|
overflow: hidden;
|
|
}
|
|
.settings-modal .setting-list,
|
|
.settings-modal .option-list {
|
|
list-style-type: none;
|
|
padding-left: 2em;
|
|
}
|
|
.settings-modal .setting-list li,
|
|
.settings-modal .option-list li {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.settings-modal .setting-list .suboptions,
|
|
.settings-modal .option-list .suboptions {
|
|
margin-top: 0.3em;
|
|
}
|
|
.settings-modal.peek .settings-modal-panel {
|
|
/* Explanation:
|
|
* Modal is positioned vertically centered.
|
|
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
|
|
* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
|
|
* + 100% - we move modal completely off-screen, it's top boundary touches
|
|
* bottom of the screen
|
|
* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
|
|
*/
|
|
transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.settings-modal.peek .settings-modal-panel {
|
|
/* For mobile, the modal takes 100% of the available screen.
|
|
This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
|
|
*/
|
|
transform: translateY(calc(100% - 50px));
|
|
}
|
|
}
|
|
.settings-modal .settings-modal-panel {
|
|
overflow: hidden;
|
|
transition: transform;
|
|
transition-timing-function: ease-in-out;
|
|
transition-duration: 300ms;
|
|
width: 1000px;
|
|
max-width: 90vw;
|
|
height: 90vh;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.settings-modal .settings-modal-panel {
|
|
max-width: 100vw;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.settings-modal .settings-modal-panel > .panel-body {
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
}
|
|
.settings-modal .settings-modal-panel > .panel-body .btn {
|
|
min-height: 2em;
|
|
min-width: 10em;
|
|
padding: 0 2em;
|
|
}
|
|
.settings-modal .settings-footer {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.settings-modal .settings-footer > * {
|
|
margin-right: 0.5em;
|
|
}
|
|
.settings-modal .settings-footer .extra-content {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
}
|
|
.modal-view.media-modal-view {
|
|
z-index: 9000;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.modal-view.media-modal-view .modal-view-button-arrow,
|
|
.modal-view.media-modal-view .modal-view-button-hide {
|
|
opacity: 0.75;
|
|
}
|
|
.modal-view.media-modal-view .modal-view-button-arrow:focus, .modal-view.media-modal-view .modal-view-button-arrow:hover,
|
|
.modal-view.media-modal-view .modal-view-button-hide:focus,
|
|
.modal-view.media-modal-view .modal-view-button-hide:hover {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
.modal-view.media-modal-view .modal-view-button-arrow:hover,
|
|
.modal-view.media-modal-view .modal-view-button-hide:hover {
|
|
opacity: 1;
|
|
}
|
|
@keyframes media-fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.media-modal-view .modal-image-container {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
overflow: hidden;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.media-modal-view .modal-image-container-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.media-modal-view .description,
|
|
.media-modal-view .counter {
|
|
/* Hardcoded since background is also hardcoded */
|
|
color: white;
|
|
margin-top: 1em;
|
|
text-shadow: 0 0 10px black, 0 0 10px black;
|
|
padding: 0.2em 2em;
|
|
}
|
|
.media-modal-view .description {
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
overflow-y: auto;
|
|
min-height: 1em;
|
|
max-width: 500px;
|
|
max-height: 9.5em;
|
|
word-break: break-all;
|
|
}
|
|
.media-modal-view .modal-image {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
image-orientation: from-image;
|
|
animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;
|
|
}
|
|
.media-modal-view .modal-image.loading {
|
|
opacity: 0.5;
|
|
}
|
|
.media-modal-view .loading-spinner {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.media-modal-view .loading-spinner svg {
|
|
color: white;
|
|
}
|
|
.media-modal-view .modal-view-button {
|
|
border: 0;
|
|
padding: 0;
|
|
opacity: 0;
|
|
box-shadow: none;
|
|
background: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
overflow: visible;
|
|
cursor: pointer;
|
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
|
height: 3em;
|
|
width: 3em;
|
|
}
|
|
.media-modal-view .modal-view-button .button-icon {
|
|
position: absolute;
|
|
height: 3em;
|
|
width: 3em;
|
|
font-size: 1rem;
|
|
line-height: 3em;
|
|
color: #FFF;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.media-modal-view .modal-view-button-arrow {
|
|
position: absolute;
|
|
display: block;
|
|
top: 50%;
|
|
margin-top: calc(3em / 2);
|
|
width: 3em;
|
|
height: 3em;
|
|
}
|
|
.media-modal-view .modal-view-button-arrow .arrow-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
line-height: 3em;
|
|
color: #FFF;
|
|
text-align: center;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
.media-modal-view .modal-view-button-arrow--prev {
|
|
left: 0;
|
|
}
|
|
.media-modal-view .modal-view-button-arrow--prev .arrow-icon {
|
|
left: 0.5em;
|
|
}
|
|
.media-modal-view .modal-view-button-arrow--next {
|
|
right: 0;
|
|
}
|
|
.media-modal-view .modal-view-button-arrow--next .arrow-icon {
|
|
right: 0.5em;
|
|
}
|
|
.media-modal-view .modal-view-button-hide {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.media-modal-view .modal-view-button-hide .button-icon {
|
|
top: 0.5em;
|
|
right: 0.5em;
|
|
}
|
|
.side-drawer-container {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
transition-duration: 0s;
|
|
transition-property: transform;
|
|
}
|
|
.side-drawer-container-open {
|
|
transform: translate(0%);
|
|
}
|
|
.side-drawer-container-closed {
|
|
transition-delay: 0.35s;
|
|
transform: translate(-100%);
|
|
}
|
|
.side-drawer-darken {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: -1;
|
|
transition: 0.35s;
|
|
transition-property: background-color;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.side-drawer-darken-closed {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
.side-drawer-click-outside {
|
|
-ms-flex: 1 1 100%;
|
|
flex: 1 1 100%;
|
|
}
|
|
.side-drawer {
|
|
overflow-x: hidden;
|
|
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
|
transition: 0.35s;
|
|
transition-property: transform;
|
|
margin: 0 0 0 -100px;
|
|
padding: 0 0 1em 100px;
|
|
width: 80%;
|
|
max-width: 20em;
|
|
-ms-flex: 0 0 80%;
|
|
flex: 0 0 80%;
|
|
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
|
|
box-shadow: var(--panelShadow);
|
|
background-color: #121a24;
|
|
background-color: var(--popover, #121a24);
|
|
color: #d8a070;
|
|
color: var(--popoverText, #d8a070);
|
|
--faint: var(--popoverFaintText, $fallback--faint);
|
|
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
|
--lightText: var(--popoverLightText, $fallback--lightText);
|
|
--icon: var(--popoverIcon, $fallback--icon);
|
|
}
|
|
.side-drawer .badge {
|
|
margin-left: 10px;
|
|
}
|
|
.side-drawer-logo-wrapper {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
padding: 0.85em;
|
|
}
|
|
.side-drawer-logo-wrapper img {
|
|
-ms-flex: none;
|
|
flex: none;
|
|
height: 50px;
|
|
margin-right: 0.85em;
|
|
}
|
|
.side-drawer-logo-wrapper span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.side-drawer-click-outside-closed {
|
|
-ms-flex: 0 0 0px;
|
|
flex: 0 0 0;
|
|
}
|
|
.side-drawer-closed {
|
|
transform: translate(-100%);
|
|
}
|
|
.side-drawer-heading {
|
|
background: transparent;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.side-drawer ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-bottom: 1px solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
}
|
|
.side-drawer ul:last-child {
|
|
border: 0;
|
|
}
|
|
.side-drawer li {
|
|
padding: 0;
|
|
}
|
|
.side-drawer li a, .side-drawer li button {
|
|
box-sizing: border-box;
|
|
display: block;
|
|
height: 3em;
|
|
line-height: 3em;
|
|
padding: 0 0.7em;
|
|
}
|
|
.side-drawer li a:hover, .side-drawer li button:hover {
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedMenuPopover, #151e2a);
|
|
color: #b9b9ba;
|
|
color: var(--selectedMenuPopoverText, #b9b9ba);
|
|
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
|
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
|
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
|
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
|
}
|
|
.MobilePostButton.button-default {
|
|
width: 5em;
|
|
height: 5em;
|
|
border-radius: 100%;
|
|
position: fixed;
|
|
bottom: 1.5em;
|
|
right: 1.5em;
|
|
background-color: #182230;
|
|
background-color: var(--btn, #182230);
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
transition: 0.35s transform;
|
|
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
|
}
|
|
.MobilePostButton.hidden {
|
|
transform: translateY(150%);
|
|
}
|
|
.MobilePostButton svg {
|
|
font-size: 1.5em;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
@media all and (min-width: 801px) {
|
|
.new-status-button:not(.always-show) {
|
|
display: none;
|
|
}
|
|
}
|
|
.ReplyButton {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.ReplyButton > :first-child {
|
|
padding: 10px;
|
|
margin: -10px -8px -10px -10px;
|
|
}
|
|
.ReplyButton .action-counter {
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.ReplyButton .interactive:hover .svg-inline--fa, .ReplyButton .interactive.-active .svg-inline--fa {
|
|
color: #0095ff;
|
|
color: var(--cBlue, #0095ff);
|
|
}
|
|
.FavoriteButton {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.FavoriteButton > :first-child {
|
|
padding: 10px;
|
|
margin: -10px -8px -10px -10px;
|
|
}
|
|
.FavoriteButton .action-counter {
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.FavoriteButton .interactive .svg-inline--fa {
|
|
animation-duration: 0.6s;
|
|
}
|
|
.FavoriteButton .interactive:hover .svg-inline--fa, .FavoriteButton .interactive.-favorited .svg-inline--fa {
|
|
color: orange;
|
|
color: var(--cOrange, orange);
|
|
}
|
|
.custom-reaction {
|
|
width: 30px !important;
|
|
}
|
|
.ReactButton {
|
|
/* override of popover internal stuff */
|
|
}
|
|
.ReactButton .reaction-picker-filter {
|
|
padding: 0.5em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.ReactButton .reaction-picker-filter input {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.ReactButton .reaction-picker-divider {
|
|
height: 1px;
|
|
width: 100%;
|
|
margin: 0.5em;
|
|
background-color: var(--border, #222);
|
|
}
|
|
.ReactButton .reaction-picker {
|
|
width: 10em;
|
|
height: 9em;
|
|
font-size: 1.5em;
|
|
overflow-y: scroll;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
padding: 0.5em;
|
|
text-align: center;
|
|
-ms-flex-line-pack: start;
|
|
align-content: flex-start;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
-webkit-mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white);
|
|
mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, linear-gradient(to top, white, white);
|
|
transition: -webkit-mask-size 150ms;
|
|
transition: mask-size 150ms;
|
|
transition: mask-size 150ms, -webkit-mask-size 150ms;
|
|
-webkit-mask-size: 100% 20px, 100% 20px, auto;
|
|
mask-size: 100% 20px, 100% 20px, auto;
|
|
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
.ReactButton .reaction-picker .emoji-button {
|
|
cursor: pointer;
|
|
-ms-flex-preferred-size: 20%;
|
|
flex-basis: 20%;
|
|
line-height: 1.5;
|
|
-ms-flex-line-pack: center;
|
|
align-content: center;
|
|
}
|
|
.ReactButton .reaction-picker .emoji-button:hover {
|
|
transform: scale(1.25);
|
|
}
|
|
.ReactButton .popover-trigger-button {
|
|
width: auto;
|
|
}
|
|
.ReactButton .popover-trigger {
|
|
padding: 10px;
|
|
margin: -10px;
|
|
}
|
|
.ReactButton .popover-trigger:hover .svg-inline--fa {
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.RetweetButton {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.RetweetButton > :first-child {
|
|
padding: 10px;
|
|
margin: -10px -8px -10px -10px;
|
|
}
|
|
.RetweetButton .action-counter {
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.RetweetButton .interactive .svg-inline--fa {
|
|
animation-duration: 0.6s;
|
|
}
|
|
.RetweetButton .interactive:hover .svg-inline--fa, .RetweetButton .interactive.-repeated .svg-inline--fa {
|
|
color: #0fa00f;
|
|
color: var(--cGreen, #0fa00f);
|
|
}
|
|
.ExtraButtons {
|
|
/* override of popover internal stuff */
|
|
}
|
|
.ExtraButtons .popover-trigger-button {
|
|
width: auto;
|
|
}
|
|
.ExtraButtons .popover-trigger {
|
|
position: static;
|
|
padding: 10px;
|
|
margin: -10px;
|
|
}
|
|
.ExtraButtons .popover-trigger:hover .svg-inline--fa {
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.avatars {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
height: 24px;
|
|
}
|
|
.avatars .avatars-item {
|
|
margin: 0 0 5px 5px;
|
|
}
|
|
.avatars .avatars-item:first-child {
|
|
padding-left: 5px;
|
|
}
|
|
.avatars .avatars-item .avatar-small {
|
|
border-radius: 10px;
|
|
border-radius: var(--avatarAltRadius, 10px);
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
/* popover styles load on-demand, so we need to override */
|
|
.status-popover.popover {
|
|
font-size: 1rem;
|
|
min-width: 15em;
|
|
max-width: 95%;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: 5px;
|
|
border-radius: var(--tooltipRadius, 5px);
|
|
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
|
|
box-shadow: var(--popupShadow);
|
|
/* TODO cleanup this */
|
|
}
|
|
.status-popover.popover .Status.Status {
|
|
border: none;
|
|
}
|
|
.status-popover.popover .status-preview-no-content {
|
|
padding: 1em;
|
|
text-align: center;
|
|
}
|
|
.status-popover.popover .status-preview-no-content i {
|
|
font-size: 2em;
|
|
}
|
|
.user-list-popover {
|
|
padding: 0.5em;
|
|
--emoji-size: 16px;
|
|
}
|
|
.user-list-popover .user-list-row {
|
|
padding: 0.25em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
.user-list-popover .user-list-row .user-list-names {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
margin-left: 0.5em;
|
|
min-width: 5em;
|
|
}
|
|
.user-list-popover .user-list-row .user-list-names img {
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.user-list-popover .user-list-row .user-list-screen-name {
|
|
font-size: 0.65em;
|
|
}
|
|
.emoji-reactions {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin-top: 0.25em;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.unicode-emoji {
|
|
font-size: 210%;
|
|
}
|
|
.emoji-reaction {
|
|
padding: 0 0.5em;
|
|
margin-right: 0.5em;
|
|
margin-top: 0.5em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
.emoji-reaction .reaction-emoji {
|
|
width: 2.55em !important;
|
|
margin-right: 0.25em;
|
|
}
|
|
.emoji-reaction:focus {
|
|
outline: none;
|
|
}
|
|
.emoji-reaction.not-clickable {
|
|
cursor: default;
|
|
}
|
|
.emoji-reaction.not-clickable:hover {
|
|
box-shadow: 0px 0px 2px 0px black, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
|
|
box-shadow: var(--buttonShadow);
|
|
}
|
|
.emoji-reaction-expand {
|
|
padding: 0 0.5em;
|
|
margin-right: 0.5em;
|
|
margin-top: 0.5em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.emoji-reaction-expand:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.picked-reaction {
|
|
border: 1px solid var(--accent, #d8a070);
|
|
margin-left: -1px;
|
|
margin-right: calc(0.5em - 1px);
|
|
}
|
|
.Status {
|
|
min-width: 0;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
.Status:hover {
|
|
--_still-image-img-visibility: visible;
|
|
--_still-image-canvas-visibility: hidden;
|
|
--_still-image-label-visibility: hidden;
|
|
}
|
|
.Status.-focused {
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedPost, #151e2a);
|
|
color: #b9b9ba;
|
|
color: var(--selectedPostText, #b9b9ba);
|
|
--lightText: var(--selectedPostLightText, $fallback--light);
|
|
--faint: var(--selectedPostFaintText, $fallback--faint);
|
|
--faintLink: var(--selectedPostFaintLink, $fallback--faint);
|
|
--postLink: var(--selectedPostPostLink, $fallback--faint);
|
|
--postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
|
|
--icon: var(--selectedPostIcon, $fallback--icon);
|
|
}
|
|
.Status .gravestone {
|
|
padding: var(--status-margin, 0.75em);
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.Status .gravestone .deleted-text {
|
|
margin: 0.5em 0;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.Status .status-container {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: var(--status-margin, 0.75em);
|
|
}
|
|
.Status .status-container > * {
|
|
min-width: 0;
|
|
}
|
|
.Status .status-container.-repeat {
|
|
padding-top: 0;
|
|
}
|
|
.Status .pin {
|
|
padding: var(--status-margin, 0.75em) var(--status-margin, 0.75em) 0;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
._misclick-prevention .Status {
|
|
pointer-events: none;
|
|
}
|
|
._misclick-prevention .Status .attachments {
|
|
pointer-events: initial;
|
|
cursor: initial;
|
|
}
|
|
.Status .left-side {
|
|
margin-right: var(--status-margin, 0.75em);
|
|
}
|
|
.Status .right-side {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.Status .usercard {
|
|
margin-bottom: var(--status-margin, 0.75em);
|
|
}
|
|
.Status .status-username {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
max-width: 85%;
|
|
font-weight: bold;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
margin-right: 0.4em;
|
|
text-overflow: ellipsis;
|
|
--_still_image-label-scale: 0.25;
|
|
--emoji-size: 14px;
|
|
}
|
|
.Status .status-favicon {
|
|
height: 18px;
|
|
width: 18px;
|
|
margin-right: 0.4em;
|
|
}
|
|
.Status .status-heading {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.Status .heading-name-row {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
line-height: 1.3;
|
|
}
|
|
.Status .heading-name-row a {
|
|
display: inline-block;
|
|
word-break: break-all;
|
|
}
|
|
.Status .account-name {
|
|
min-width: 1.6em;
|
|
margin-right: 0.4em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-ms-flex: 1 1 0px;
|
|
flex: 1 1 0;
|
|
}
|
|
.Status .heading-left {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
min-width: 0;
|
|
}
|
|
.Status .heading-right {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.Status .heading-right .button-unstyled {
|
|
padding: 5px;
|
|
margin: -5px;
|
|
}
|
|
.Status .heading-right .button-unstyled:hover svg {
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
.Status .heading-right .svg-inline--fa {
|
|
margin-left: 0.25em;
|
|
}
|
|
.Status .glued-label {
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
white-space: nowrap;
|
|
}
|
|
.Status .timeago {
|
|
margin-right: 0.2em;
|
|
}
|
|
.Status .heading-reply-row {
|
|
position: relative;
|
|
-ms-flex-line-pack: baseline;
|
|
align-content: baseline;
|
|
font-size: 0.85em;
|
|
margin-top: 0.2em;
|
|
line-height: 130%;
|
|
max-width: 100%;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
}
|
|
.Status .reply-to-popover, .Status .reply-to-no-popover, .Status .mentions {
|
|
min-width: 0;
|
|
margin-right: 0.4em;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.Status .reply-glued-label {
|
|
margin-right: 0.5em;
|
|
}
|
|
.Status .reply-to-popover .reply-to:hover::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
border-bottom: 1px solid var(--faint);
|
|
pointer-events: none;
|
|
}
|
|
.Status .reply-to-popover .faint-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
.Status .reply-to-popover.-strikethrough .reply-to::after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100%;
|
|
border-bottom: 1px solid var(--faint);
|
|
pointer-events: none;
|
|
}
|
|
.Status .mentions, .Status .reply-to {
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
.Status .mentions-text, .Status .reply-to-text {
|
|
color: var(--faint);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.Status .mentions-line {
|
|
display: inline;
|
|
}
|
|
.Status .replies {
|
|
margin-top: 0.25em;
|
|
line-height: 1.3;
|
|
font-size: 0.85em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.Status .replies > * {
|
|
margin-right: 0.4em;
|
|
}
|
|
.Status .reply-link {
|
|
height: 17px;
|
|
}
|
|
.Status .repeat-info {
|
|
padding: 0.4em var(--status-margin, 0.75em);
|
|
}
|
|
.Status .repeat-info .repeat-icon {
|
|
color: #0fa00f;
|
|
color: var(--cGreen, #0fa00f);
|
|
}
|
|
.Status .repeater-avatar {
|
|
border-radius: var(--avatarAltRadius, 10px);
|
|
margin-left: 28px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.Status .repeater-name {
|
|
text-overflow: ellipsis;
|
|
margin-right: 0;
|
|
}
|
|
.Status .repeater-name .emoji {
|
|
width: 14px;
|
|
height: 14px;
|
|
vertical-align: middle;
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
}
|
|
.Status .status-fadein {
|
|
animation-duration: 0.4s;
|
|
animation-name: fadein;
|
|
}
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.Status .status-actions {
|
|
position: relative;
|
|
width: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin-top: var(--status-margin, 0.75em);
|
|
}
|
|
.Status .status-actions > * {
|
|
max-width: 4em;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.Status .muted {
|
|
padding: 0.25em 0.6em;
|
|
height: 1.2em;
|
|
line-height: 1.2em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.Status .muted .status-username, .Status .muted .mute-thread, .Status .muted .mute-words {
|
|
word-wrap: normal;
|
|
word-break: normal;
|
|
white-space: nowrap;
|
|
}
|
|
.Status .muted .status-username, .Status .muted .mute-words {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.Status .muted .status-username {
|
|
font-weight: normal;
|
|
-ms-flex: 0 1 auto;
|
|
flex: 0 1 auto;
|
|
margin-right: 0.2em;
|
|
font-size: smaller;
|
|
}
|
|
.Status .muted .mute-thread {
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
.Status .muted .mute-words {
|
|
-ms-flex: 1 0 5em;
|
|
flex: 1 0 5em;
|
|
margin-left: 0.2em;
|
|
}
|
|
.Status .muted .mute-words::before {
|
|
content: " ";
|
|
}
|
|
.Status .muted .unmute {
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
display: block;
|
|
}
|
|
.Status .reply-form {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.Status .reply-body {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.Status .favs-repeated-users {
|
|
margin-top: var(--status-margin, 0.75em);
|
|
}
|
|
.Status .stats {
|
|
width: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
line-height: 1em;
|
|
}
|
|
.Status .avatar-row {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.Status .avatar-row::before {
|
|
content: "";
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 1px;
|
|
left: 0;
|
|
background-color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.Status .stat-count {
|
|
margin-right: var(--status-margin, 0.75em);
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.Status .stat-count .stat-title {
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
font-size: 0.85em;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
}
|
|
.Status .stat-count .stat-number {
|
|
font-weight: bolder;
|
|
font-size: 1.1em;
|
|
line-height: 1em;
|
|
}
|
|
.Status .stat-count:hover .stat-title {
|
|
text-decoration: underline;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.Status .repeater-avatar {
|
|
margin-left: 20px;
|
|
}
|
|
.Status .post-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.Status .post-avatar.-compact {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
.notification-reaction-emoji {
|
|
width: 40px;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.Notification {
|
|
border-bottom: 1px solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
--emoji-size: 14px;
|
|
}
|
|
.Notification:hover {
|
|
--_still-image-img-visibility: visible;
|
|
--_still-image-canvas-visibility: hidden;
|
|
--_still-image-label-visibility: hidden;
|
|
}
|
|
.Notification.-muted {
|
|
padding: 0.25em 0.6em;
|
|
height: 1.2em;
|
|
line-height: 1.2em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.Notification.-muted .status-username, .Notification.-muted .mute-thread, .Notification.-muted .mute-words {
|
|
word-wrap: normal;
|
|
word-break: normal;
|
|
white-space: nowrap;
|
|
}
|
|
.Notification.-muted .status-username, .Notification.-muted .mute-words {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.Notification.-muted .status-username {
|
|
font-weight: normal;
|
|
-ms-flex: 0 1 auto;
|
|
flex: 0 1 auto;
|
|
margin-right: 0.2em;
|
|
font-size: smaller;
|
|
}
|
|
.Notification.-muted .mute-thread {
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
.Notification.-muted .mute-words {
|
|
-ms-flex: 1 0 5em;
|
|
flex: 1 0 5em;
|
|
margin-left: 0.2em;
|
|
}
|
|
.Notification.-muted .mute-words::before {
|
|
content: " ";
|
|
}
|
|
.Notification.-muted .unmute {
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
display: block;
|
|
}
|
|
.Notification .type-icon {
|
|
margin: 0 0.1em;
|
|
}
|
|
.Notification.-type--repeat .type-icon {
|
|
color: #0fa00f;
|
|
color: var(--cGreen, #0fa00f);
|
|
}
|
|
.Notification.-type--follow .type-icon {
|
|
color: #0095ff;
|
|
color: var(--cBlue, #0095ff);
|
|
}
|
|
.Notification.-type--follow-request .type-icon {
|
|
color: #0095ff;
|
|
color: var(--cBlue, #0095ff);
|
|
}
|
|
.Notification.-type--like .type-icon {
|
|
color: orange;
|
|
color: orange;
|
|
color: var(--cOrange, orange);
|
|
}
|
|
.Notification.-type--move .type-icon {
|
|
color: #0095ff;
|
|
color: var(--cBlue, #0095ff);
|
|
}
|
|
.NotificationFilters {
|
|
-ms-flex-item-align: stretch;
|
|
-ms-grid-row-align: stretch;
|
|
align-self: stretch;
|
|
}
|
|
.NotificationFilters > button {
|
|
line-height: 100%;
|
|
height: 100%;
|
|
width: var(--__panel-heading-height-inner);
|
|
text-align: center;
|
|
}
|
|
.NotificationFilters > button svg {
|
|
font-size: 1.2em;
|
|
}
|
|
.Notifications:not(.minimal) {
|
|
padding-bottom: 15em;
|
|
}
|
|
.Notifications .loadmore-error {
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.Notifications .notification {
|
|
position: relative;
|
|
}
|
|
.Notifications .notification .notification-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
}
|
|
.Notifications .notification.unseen .notification-overlay {
|
|
background-image: linear-gradient(135deg, var(--badgeNotification, #ff0000) 4px, transparent 10px);
|
|
}
|
|
.notification {
|
|
box-sizing: border-box;
|
|
/* TODO cleanup this */
|
|
}
|
|
.notification:hover .animated.Avatar canvas {
|
|
display: none;
|
|
}
|
|
.notification:hover .animated.Avatar img {
|
|
visibility: visible;
|
|
}
|
|
.notification:last-child .Notification {
|
|
border-bottom: none;
|
|
}
|
|
.notification .non-mention {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
padding: 0.6em;
|
|
min-width: 0;
|
|
--link: var(--faintLink);
|
|
--text: var(--faint);
|
|
}
|
|
.notification .non-mention .avatar-container {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.notification .follow-request-accept:hover {
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.notification .follow-request-reject:hover {
|
|
color: #ff0000;
|
|
color: var(--cRed, #ff0000);
|
|
}
|
|
.notification .follow-text, .notification .move-text {
|
|
padding: 0.5em 0;
|
|
overflow-wrap: break-word;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.notification .follow-text .follow-name, .notification .move-text .follow-name {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.notification .Status {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.notification time {
|
|
white-space: nowrap;
|
|
}
|
|
.notification .notification-right {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
padding-left: 0.8em;
|
|
min-width: 0;
|
|
}
|
|
.notification .notification-right .timeago {
|
|
min-width: 3em;
|
|
text-align: right;
|
|
}
|
|
.notification .emoji-reaction-emoji {
|
|
font-size: 1.3em;
|
|
}
|
|
.notification .notification-details {
|
|
min-width: 0;
|
|
word-wrap: break-word;
|
|
line-height: var(--post-line-height);
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
-ms-flex: 1 1 0px;
|
|
flex: 1 1 0;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.notification .notification-details .name-and-action {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.notification .notification-details .username {
|
|
font-weight: bolder;
|
|
max-width: 100%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.notification .notification-details .timeago {
|
|
margin-right: 0.2em;
|
|
}
|
|
.notification .notification-details .status-content {
|
|
margin: 0;
|
|
max-height: 300px;
|
|
}
|
|
.notification .notification-details h1 {
|
|
word-break: break-all;
|
|
margin: 0 0 0.3em;
|
|
padding: 0;
|
|
font-size: 1em;
|
|
line-height: 1.5;
|
|
}
|
|
.notification .notification-details h1 small {
|
|
font-weight: lighter;
|
|
}
|
|
.notification .notification-details p {
|
|
margin: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0.3em;
|
|
}
|
|
.MobileNav .mobile-nav {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
line-height: var(--navbar-height);
|
|
-ms-grid-rows: 50px;
|
|
grid-template-rows: 50px;
|
|
-ms-grid-columns: 2fr auto;
|
|
grid-template-columns: 2fr auto;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.MobileNav .mobile-nav a {
|
|
color: var(--topBarLink, #d8a070);
|
|
}
|
|
.MobileNav .mobile-inner-nav {
|
|
width: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.MobileNav .mobile-nav-button {
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 0 1em;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.MobileNav .site-name {
|
|
padding: 0 0.3em;
|
|
display: inline-block;
|
|
}
|
|
.MobileNav .item {
|
|
/* moslty just to get rid of extra whitespaces */
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.MobileNav .alert-dot {
|
|
border-radius: 100%;
|
|
height: 8px;
|
|
width: 8px;
|
|
position: absolute;
|
|
left: calc(50% - 4px);
|
|
top: calc(50% - 4px);
|
|
margin-left: 6px;
|
|
margin-top: -6px;
|
|
background-color: #ff0000;
|
|
background-color: var(--badgeNotification, #ff0000);
|
|
}
|
|
.MobileNav .mobile-notifications-drawer {
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
|
|
box-shadow: var(--panelShadow);
|
|
transition-property: transform;
|
|
transition-duration: 0.25s;
|
|
transform: translateX(0);
|
|
z-index: 1001;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.MobileNav .mobile-notifications-drawer.-closed {
|
|
transform: translateX(100%);
|
|
box-shadow: none;
|
|
}
|
|
.MobileNav .mobile-notifications-header {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
position: absolute;
|
|
color: var(--topBarText);
|
|
background-color: #182230;
|
|
background-color: var(--topBar, #182230);
|
|
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
|
|
box-shadow: var(--topBarShadow);
|
|
}
|
|
.MobileNav .mobile-notifications-header .title {
|
|
font-size: 1.3em;
|
|
margin-left: 0.6em;
|
|
}
|
|
.MobileNav .mobile-notifications {
|
|
margin-top: 50px;
|
|
width: 100vw;
|
|
height: calc(100vh - var(--navbar-height));
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
}
|
|
.MobileNav .mobile-notifications .notifications {
|
|
padding: 0;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
.MobileNav .mobile-notifications .notifications .panel {
|
|
border-radius: 0;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
}
|
|
.MobileNav .mobile-notifications .notifications .panel:after {
|
|
border-radius: 0;
|
|
}
|
|
.MobileNav .mobile-notifications .notifications .panel .panel-heading {
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
.SearchBar {
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-ms-flex-align: baseline;
|
|
align-items: baseline;
|
|
vertical-align: baseline;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
.SearchBar.-expanded {
|
|
width: 100%;
|
|
}
|
|
.SearchBar .search-bar-input,
|
|
.SearchBar .search-button {
|
|
height: 29px;
|
|
}
|
|
.SearchBar .search-bar-input {
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
}
|
|
.SearchBar .cancel-search {
|
|
height: 50px;
|
|
}
|
|
.SearchBar .cancel-icon {
|
|
color: #b9b9ba;
|
|
color: var(--btnTopBarText, #b9b9ba);
|
|
}
|
|
.DesktopNav {
|
|
width: 100%;
|
|
}
|
|
.DesktopNav a {
|
|
color: var(--topBarLink, #d8a070);
|
|
}
|
|
.DesktopNav .inner-nav {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-rows: var(--navbar-height);
|
|
grid-template-rows: var(--navbar-height);
|
|
-ms-grid-columns: 2fr auto 2fr;
|
|
grid-template-columns: 2fr auto 2fr;
|
|
grid-template-areas: "sitename logo actions";
|
|
box-sizing: border-box;
|
|
padding: 0 1.2em;
|
|
margin: auto;
|
|
max-width: 980px;
|
|
}
|
|
.DesktopNav.-logoLeft .inner-nav {
|
|
-ms-grid-columns: auto 2fr 2fr;
|
|
grid-template-columns: auto 2fr 2fr;
|
|
grid-template-areas: "logo sitename actions";
|
|
}
|
|
.DesktopNav .button-default, .DesktopNav .button-default svg {
|
|
color: #b9b9ba;
|
|
color: var(--btnTopBarText, #b9b9ba);
|
|
}
|
|
.DesktopNav .button-default:active {
|
|
background-color: #182230;
|
|
background-color: var(--btnPressedTopBar, #182230);
|
|
color: #b9b9ba;
|
|
color: var(--btnPressedTopBarText, #b9b9ba);
|
|
}
|
|
.DesktopNav .button-default:disabled {
|
|
color: #b9b9ba;
|
|
color: var(--btnDisabledTopBarText, #b9b9ba);
|
|
}
|
|
.DesktopNav .button-default.toggled {
|
|
color: #b9b9ba;
|
|
color: var(--btnToggledTopBarText, #b9b9ba);
|
|
background-color: #182230;
|
|
background-color: var(--btnToggledTopBar, #182230);
|
|
}
|
|
.DesktopNav .logo {
|
|
grid-area: logo;
|
|
position: relative;
|
|
transition: opacity;
|
|
transition-timing-function: ease-out;
|
|
transition-duration: 100ms;
|
|
}
|
|
@media all and (min-width: 800px) {
|
|
.DesktopNav .logo {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
.DesktopNav .logo .mask {
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
mask-position: center;
|
|
-webkit-mask-size: contain;
|
|
mask-size: contain;
|
|
background-color: #182230;
|
|
background-color: var(--topBarText, #182230);
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.DesktopNav .logo img {
|
|
display: inline-block;
|
|
height: var(--navbar-height);
|
|
}
|
|
.DesktopNav .nav-icon {
|
|
margin-left: 0.2em;
|
|
width: 2em;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
.DesktopNav .nav-icon .svg-inline--fa {
|
|
color: #d8a070;
|
|
color: var(--topBarLink, #d8a070);
|
|
}
|
|
.DesktopNav .sitename {
|
|
grid-area: sitename;
|
|
}
|
|
.DesktopNav .actions {
|
|
grid-area: actions;
|
|
}
|
|
.DesktopNav .item {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
line-height: var(--navbar-height);
|
|
height: var(--navbar-height);
|
|
overflow: hidden;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.DesktopNav .item.right {
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
}
|
|
.list-item:not(:last-child) {
|
|
border-bottom: 1px solid;
|
|
border-bottom-color: #222;
|
|
border-bottom-color: var(--border, #222);
|
|
}
|
|
.list-empty-content {
|
|
text-align: center;
|
|
padding: 10px;
|
|
}
|
|
.user-reporting-panel {
|
|
width: 90vw;
|
|
max-width: 700px;
|
|
min-height: 20vh;
|
|
max-height: 80vh;
|
|
}
|
|
.user-reporting-panel .panel-body {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column-reverse;
|
|
flex-direction: column-reverse;
|
|
border-top: 1px solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
overflow: hidden;
|
|
}
|
|
.user-reporting-panel-left {
|
|
padding: 1.1em 0.7em 0.7em;
|
|
line-height: var(--post-line-height);
|
|
box-sizing: border-box;
|
|
}
|
|
.user-reporting-panel-left > div {
|
|
margin-bottom: 1em;
|
|
}
|
|
.user-reporting-panel-left > div:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.user-reporting-panel-left p {
|
|
margin-top: 0;
|
|
}
|
|
.user-reporting-panel-left textarea.form-control {
|
|
line-height: 16px;
|
|
resize: none;
|
|
overflow: hidden;
|
|
transition: min-height 200ms 100ms;
|
|
min-height: 44px;
|
|
width: 100%;
|
|
}
|
|
.user-reporting-panel-left .btn {
|
|
min-width: 10em;
|
|
padding: 0 2em;
|
|
}
|
|
.user-reporting-panel-left .alert {
|
|
margin: 1em 0 0 0;
|
|
line-height: 1.3em;
|
|
}
|
|
.user-reporting-panel-right {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
.user-reporting-panel-sitem {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
/* TODO cleanup this */
|
|
}
|
|
.user-reporting-panel-sitem > .Status {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.user-reporting-panel-sitem > .checkbox {
|
|
margin: 0.75em;
|
|
}
|
|
@media all and (min-width: 801px) {
|
|
.user-reporting-panel .panel-body {
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
.user-reporting-panel-left {
|
|
width: 50%;
|
|
max-width: 320px;
|
|
border-right: 1px solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
padding: 1.1em;
|
|
}
|
|
.user-reporting-panel-left > div {
|
|
margin-bottom: 2em;
|
|
}
|
|
.user-reporting-panel-right {
|
|
width: 50%;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
.modal-view.post-form-modal-view {
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
}
|
|
.post-form-modal-panel {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
margin-top: 25%;
|
|
margin-bottom: 2em;
|
|
width: 100%;
|
|
max-width: 700px;
|
|
}
|
|
@media (orientation: landscape) {
|
|
.post-form-modal-panel {
|
|
margin-top: 8%;
|
|
}
|
|
}
|
|
.global-notice-list {
|
|
position: fixed;
|
|
top: 50px;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
z-index: 1001;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.global-notice-list .global-notice {
|
|
pointer-events: auto;
|
|
text-align: center;
|
|
width: 40em;
|
|
max-width: calc(100% - 3em);
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding-left: 1.5em;
|
|
line-height: 2;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.global-notice-list .global-notice .notice-message {
|
|
-ms-flex: 1 1 100%;
|
|
flex: 1 1 100%;
|
|
}
|
|
.global-notice-list .global-error {
|
|
background-color: var(--alertPopupError, #ff0000);
|
|
color: var(--alertPopupErrorText, #b9b9ba);
|
|
}
|
|
.global-notice-list .global-error .svg-inline--fa {
|
|
color: var(--alertPopupErrorText, #b9b9ba);
|
|
}
|
|
.global-notice-list .global-warning {
|
|
background-color: var(--alertPopupWarning, orange);
|
|
color: var(--alertPopupWarningText, #b9b9ba);
|
|
}
|
|
.global-notice-list .global-warning .svg-inline--fa {
|
|
color: var(--alertPopupWarningText, #b9b9ba);
|
|
}
|
|
.global-notice-list .global-success {
|
|
background-color: var(--alertPopupSuccess, #0fa00f);
|
|
color: var(--alertPopupSuccessText, #b9b9ba);
|
|
}
|
|
.global-notice-list .global-success .svg-inline--fa {
|
|
color: var(--alertPopupSuccessText, #b9b9ba);
|
|
}
|
|
.global-notice-list .global-info {
|
|
background-color: var(--alertPopupNeutral, #182230);
|
|
color: var(--alertPopupNeutralText, #b9b9ba);
|
|
}
|
|
.global-notice-list .global-info .svg-inline--fa {
|
|
color: var(--alertPopupNeutralText, #b9b9ba);
|
|
}
|
|
.global-notice-list .close-notice {
|
|
padding-right: 0.2em;
|
|
}
|
|
.global-notice-list .close-notice .svg-inline--fa:hover {
|
|
opacity: 0.6;
|
|
}
|
|
@charset "UTF-8";
|
|
:root {
|
|
--navbar-height: 3.5rem;
|
|
--post-line-height: 1.4;
|
|
}
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
body {
|
|
font-family: sans-serif;
|
|
font-family: var(--interfaceFont, sans-serif);
|
|
margin: 0;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overscroll-behavior-y: none;
|
|
overflow-x: clip;
|
|
overflow-y: scroll;
|
|
}
|
|
body.hidden {
|
|
display: none;
|
|
}
|
|
@media (any-pointer: fine) {
|
|
* {
|
|
scrollbar-color: var(--btn) transparent;
|
|
}
|
|
*::-webkit-scrollbar {
|
|
background: transparent;
|
|
}
|
|
*::-webkit-scrollbar-button, *::-webkit-scrollbar-thumb {
|
|
background-color: var(--btn);
|
|
box-shadow: var(--buttonShadow);
|
|
border-radius: var(--btnRadius);
|
|
}
|
|
*::-webkit-scrollbar-button {
|
|
--___bgPadding: 2px;
|
|
color: var(--btnText);
|
|
background-repeat: no-repeat, no-repeat;
|
|
}
|
|
*::-webkit-scrollbar-button:horizontal {
|
|
background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
|
|
}
|
|
*::-webkit-scrollbar-button:horizontal:increment {
|
|
background-image: linear-gradient(45deg, var(--btnText) 50%, transparent 51%), linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
|
|
background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
|
|
}
|
|
*::-webkit-scrollbar-button:horizontal:decrement {
|
|
background-image: linear-gradient(45deg, transparent 50%, var(--btnText) 51%), linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
|
|
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
|
|
}
|
|
*::-webkit-scrollbar-button:vertical {
|
|
background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
|
|
}
|
|
*::-webkit-scrollbar-button:vertical:increment {
|
|
background-image: linear-gradient(-45deg, transparent 50%, var(--btnText) 51%), linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
|
|
background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
|
|
}
|
|
*::-webkit-scrollbar-button:vertical:decrement {
|
|
background-image: linear-gradient(-45deg, var(--btnText) 50%, transparent 51%), linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
|
|
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
|
|
}
|
|
html {
|
|
scrollbar-color: var(--selectedMenu) var(--wallpaper);
|
|
background: var(--wallpaper);
|
|
}
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: #d8a070;
|
|
color: var(--link, #d8a070);
|
|
}
|
|
h4 {
|
|
margin: 0;
|
|
}
|
|
i[class*=icon-],
|
|
.svg-inline--fa {
|
|
color: #666;
|
|
color: var(--icon, #666);
|
|
}
|
|
nav {
|
|
z-index: 1000;
|
|
color: var(--topBarText);
|
|
background-color: #182230;
|
|
background-color: var(--topBar, #182230);
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
|
|
box-shadow: var(--topBarShadow);
|
|
box-sizing: border-box;
|
|
height: var(--navbar-height);
|
|
position: fixed;
|
|
}
|
|
#sidebar {
|
|
grid-area: sidebar;
|
|
}
|
|
.column.-scrollable {
|
|
top: var(--navbar-height);
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
}
|
|
#main-scroller {
|
|
grid-area: content;
|
|
position: relative;
|
|
}
|
|
#notifs-column {
|
|
grid-area: notifs;
|
|
}
|
|
.app-bg-wrapper {
|
|
position: fixed;
|
|
height: 100%;
|
|
top: var(--navbar-height);
|
|
z-index: -1000;
|
|
left: 0;
|
|
right: -20px;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-color: var(--wallpaper);
|
|
background-image: var(--body-background-image);
|
|
background-position: 50%;
|
|
}
|
|
.underlay {
|
|
-ms-grid-column: 1;
|
|
grid-column-start: 1;
|
|
-ms-grid-column-span: 3;
|
|
grid-column-end: span 3;
|
|
-ms-grid-row: 1;
|
|
grid-row-start: 1;
|
|
grid-row-end: 1;
|
|
pointer-events: none;
|
|
background-color: rgba(0, 0, 0, 0.15);
|
|
background-color: var(--underlay, rgba(0, 0, 0, 0.15));
|
|
z-index: -1000;
|
|
}
|
|
.app-layout {
|
|
--miniColumn: 25rem;
|
|
--maxiColumn: minmax(var(--miniColumn), 45rem);
|
|
--columnGap: 1em;
|
|
--status-margin: 0.75em;
|
|
position: relative;
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: var(--miniColumn) var(--maxiColumn);
|
|
grid-template-columns: var(--miniColumn) var(--maxiColumn);
|
|
grid-template-areas: "sidebar content";
|
|
-ms-grid-rows: 1fr;
|
|
grid-template-rows: 1fr;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
-ms-flex-line-pack: start;
|
|
align-content: flex-start;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
overflow-x: clip;
|
|
}
|
|
.app-layout .column {
|
|
--___columnMargin: var(--columnGap);
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: 100%;
|
|
grid-template-columns: 100%;
|
|
box-sizing: border-box;
|
|
-ms-grid-row: 1;
|
|
grid-row-start: 1;
|
|
grid-row-end: 1;
|
|
margin: 0 calc(var(--___columnMargin) / 2);
|
|
padding: calc(var(--___columnMargin)) 0;
|
|
row-gap: var(--___columnMargin);
|
|
-ms-flex-line-pack: start;
|
|
align-content: start;
|
|
}
|
|
.app-layout .column:not(.-scrollable) {
|
|
margin-top: var(--navbar-height);
|
|
}
|
|
.app-layout .column:hover {
|
|
z-index: 2;
|
|
}
|
|
.app-layout .column.-full-height {
|
|
margin-bottom: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
.app-layout .column.-scrollable {
|
|
--___paddingIncrease: calc(var(--columnGap) / 2);
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: var(--navbar-height);
|
|
max-height: calc(100vh - var(--navbar-height));
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
margin-left: calc(var(--___paddingIncrease) * -1);
|
|
padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
|
|
}
|
|
@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
|
|
.app-layout .column.-scrollable:not(.-show-scrollbar) {
|
|
scrollbar-width: none;
|
|
margin-right: calc(var(--___paddingIncrease) * -1);
|
|
padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
|
|
}
|
|
.app-layout .column.-scrollable:not(.-show-scrollbar)::-webkit-scrollbar {
|
|
display: block;
|
|
width: 0;
|
|
}
|
|
}
|
|
.app-layout .column.-scrollable .panel-heading.-sticky {
|
|
top: calc(var(--columnGap) / -1);
|
|
}
|
|
.app-layout.-has-new-post-button .column {
|
|
padding-bottom: 10rem;
|
|
}
|
|
.app-layout.-no-sticky-headers .column .panel-heading.-sticky {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.app-layout .column-inner {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: 100%;
|
|
grid-template-columns: 100%;
|
|
box-sizing: border-box;
|
|
row-gap: 1em;
|
|
-ms-flex-line-pack: start;
|
|
align-content: start;
|
|
}
|
|
.app-layout.-reverse:not(.-wide):not(.-mobile) {
|
|
-ms-grid-columns: var(--maxiColumn) var(--miniColumn);
|
|
grid-template-columns: var(--maxiColumn) var(--miniColumn);
|
|
grid-template-areas: "content sidebar";
|
|
}
|
|
.app-layout.-wide {
|
|
-ms-grid-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
|
|
grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
|
|
grid-template-areas: "sidebar content notifs";
|
|
}
|
|
.app-layout.-wide.-reverse {
|
|
grid-template-areas: "notifs content sidebar";
|
|
}
|
|
.app-layout.-mobile {
|
|
-ms-grid-columns: 100vw;
|
|
grid-template-columns: 100vw;
|
|
grid-template-areas: "content";
|
|
padding: 0;
|
|
}
|
|
.app-layout.-mobile .column {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-top: 0;
|
|
margin-top: var(--navbar-height);
|
|
margin-bottom: 0;
|
|
}
|
|
.app-layout.-mobile .panel-heading,
|
|
.app-layout.-mobile .panel-heading::after,
|
|
.app-layout.-mobile .panel-heading::before,
|
|
.app-layout.-mobile .panel,
|
|
.app-layout.-mobile .panel::after {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
.app-layout.-mobile .underlay,
|
|
.app-layout.-mobile #sidebar,
|
|
.app-layout.-mobile #notifs-column {
|
|
display: none;
|
|
}
|
|
.app-layout.-normal #notifs-column {
|
|
display: none;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.button-default {
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
color: #b9b9ba;
|
|
color: var(--btnText, #b9b9ba);
|
|
background-color: #182230;
|
|
background-color: var(--btn, #182230);
|
|
border: none;
|
|
border-radius: 4px;
|
|
border-radius: var(--btnRadius, 4px);
|
|
cursor: pointer;
|
|
box-shadow: 0px 0px 2px 0px black, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
|
|
box-shadow: var(--buttonShadow);
|
|
font-size: 1em;
|
|
font-family: sans-serif;
|
|
font-family: var(--interfaceFont, sans-serif);
|
|
}
|
|
.button-default.-sublime {
|
|
background: transparent;
|
|
}
|
|
.button-default i[class*=icon-],
|
|
.button-default .svg-inline--fa {
|
|
color: #b9b9ba;
|
|
color: var(--btnText, #b9b9ba);
|
|
}
|
|
.button-default::-moz-focus-inner {
|
|
border: none;
|
|
}
|
|
.button-default:hover {
|
|
box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
|
|
box-shadow: var(--buttonHoverShadow);
|
|
}
|
|
.button-default:active {
|
|
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
|
|
box-shadow: var(--buttonPressedShadow);
|
|
color: #b9b9ba;
|
|
color: var(--btnPressedText, #b9b9ba);
|
|
background-color: #182230;
|
|
background-color: var(--btnPressed, #182230);
|
|
}
|
|
.button-default:active svg,
|
|
.button-default:active i {
|
|
color: #b9b9ba;
|
|
color: var(--btnPressedText, #b9b9ba);
|
|
}
|
|
.button-default:disabled {
|
|
cursor: not-allowed;
|
|
color: #b9b9ba;
|
|
color: var(--btnDisabledText, #b9b9ba);
|
|
background-color: #182230;
|
|
background-color: var(--btnDisabled, #182230);
|
|
}
|
|
.button-default:disabled svg,
|
|
.button-default:disabled i {
|
|
color: #b9b9ba;
|
|
color: var(--btnDisabledText, #b9b9ba);
|
|
}
|
|
.button-default.toggled {
|
|
color: #b9b9ba;
|
|
color: var(--btnToggledText, #b9b9ba);
|
|
background-color: #182230;
|
|
background-color: var(--btnToggled, #182230);
|
|
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
|
|
box-shadow: var(--buttonPressedShadow);
|
|
}
|
|
.button-default.toggled svg,
|
|
.button-default.toggled i {
|
|
color: #b9b9ba;
|
|
color: var(--btnToggledText, #b9b9ba);
|
|
}
|
|
.button-default.danger {
|
|
color: #b9b9ba;
|
|
color: var(--alertErrorPanelText, #b9b9ba);
|
|
background-color: rgba(211, 16, 20, 0.5);
|
|
background-color: var(--alertError, rgba(211, 16, 20, 0.5));
|
|
}
|
|
.button-unstyled {
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
display: inline;
|
|
text-align: initial;
|
|
font-size: 100%;
|
|
font-family: inherit;
|
|
padding: 0;
|
|
line-height: unset;
|
|
cursor: pointer;
|
|
box-sizing: content-box;
|
|
color: inherit;
|
|
}
|
|
.button-unstyled.-link {
|
|
color: #d8a070;
|
|
color: var(--link, #d8a070);
|
|
}
|
|
.button-unstyled.-fullwidth {
|
|
width: 100%;
|
|
}
|
|
.button-unstyled.-hover-highlight:hover svg {
|
|
color: #b9b9ba;
|
|
color: var(--lightText, #b9b9ba);
|
|
}
|
|
input,
|
|
textarea,
|
|
.input {
|
|
--_padding: 0.5em;
|
|
border: none;
|
|
border-radius: 4px;
|
|
border-radius: var(--inputRadius, 4px);
|
|
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 black inset;
|
|
box-shadow: var(--inputShadow);
|
|
background-color: #182230;
|
|
background-color: var(--input, #182230);
|
|
color: #b9b9ba;
|
|
color: var(--inputText, #b9b9ba);
|
|
font-family: sans-serif;
|
|
font-family: var(--inputFont, sans-serif);
|
|
font-size: 1em;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
position: relative;
|
|
line-height: 2;
|
|
-webkit-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
padding: 0 var(--_padding);
|
|
}
|
|
input.unstyled,
|
|
textarea.unstyled,
|
|
.input.unstyled {
|
|
border-radius: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
height: unset;
|
|
}
|
|
input:disabled, input[disabled=disabled], input.disabled,
|
|
textarea:disabled,
|
|
textarea[disabled=disabled],
|
|
textarea.disabled,
|
|
.input:disabled,
|
|
.input[disabled=disabled],
|
|
.input.disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
input[type=range],
|
|
textarea[type=range],
|
|
.input[type=range] {
|
|
background: none;
|
|
border: none;
|
|
margin: 0;
|
|
box-shadow: none;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
input[type=radio],
|
|
textarea[type=radio],
|
|
.input[type=radio] {
|
|
display: none;
|
|
}
|
|
input[type=radio]:checked + label::before,
|
|
textarea[type=radio]:checked + label::before,
|
|
.input[type=radio]:checked + label::before {
|
|
box-shadow: 0 0 2px black inset, 0 0 0 4px #182230 inset;
|
|
box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, #182230) inset;
|
|
background-color: var(--accent, #d8a070);
|
|
}
|
|
input[type=radio]:disabled, input[type=radio]:disabled + label, input[type=radio]:disabled + label::before,
|
|
textarea[type=radio]:disabled,
|
|
textarea[type=radio]:disabled + label,
|
|
textarea[type=radio]:disabled + label::before,
|
|
.input[type=radio]:disabled,
|
|
.input[type=radio]:disabled + label,
|
|
.input[type=radio]:disabled + label::before {
|
|
opacity: 0.5;
|
|
}
|
|
input[type=radio] + label::before,
|
|
textarea[type=radio] + label::before,
|
|
.input[type=radio] + label::before {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
content: "";
|
|
transition: box-shadow 200ms;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
border-radius: 100%;
|
|
box-shadow: 0 0 2px black inset;
|
|
box-shadow: var(--inputShadow);
|
|
margin-right: 0.5em;
|
|
background-color: #182230;
|
|
background-color: var(--input, #182230);
|
|
vertical-align: top;
|
|
text-align: center;
|
|
line-height: 1.1;
|
|
font-size: 1.1em;
|
|
box-sizing: border-box;
|
|
color: transparent;
|
|
overflow: hidden;
|
|
}
|
|
input[type=checkbox],
|
|
textarea[type=checkbox],
|
|
.input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
input[type=checkbox]:checked + label::before,
|
|
textarea[type=checkbox]:checked + label::before,
|
|
.input[type=checkbox]:checked + label::before {
|
|
color: #b9b9ba;
|
|
color: var(--inputText, #b9b9ba);
|
|
}
|
|
input[type=checkbox]:disabled, input[type=checkbox]:disabled + label, input[type=checkbox]:disabled + label::before,
|
|
textarea[type=checkbox]:disabled,
|
|
textarea[type=checkbox]:disabled + label,
|
|
textarea[type=checkbox]:disabled + label::before,
|
|
.input[type=checkbox]:disabled,
|
|
.input[type=checkbox]:disabled + label,
|
|
.input[type=checkbox]:disabled + label::before {
|
|
opacity: 0.5;
|
|
}
|
|
input[type=checkbox] + label::before,
|
|
textarea[type=checkbox] + label::before,
|
|
.input[type=checkbox] + label::before {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
display: inline-block;
|
|
content: "\2713";
|
|
transition: color 200ms;
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
border-radius: 2px;
|
|
border-radius: var(--checkboxRadius, 2px);
|
|
box-shadow: 0 0 2px black inset;
|
|
box-shadow: var(--inputShadow);
|
|
margin-right: 0.5em;
|
|
background-color: #182230;
|
|
background-color: var(--input, #182230);
|
|
vertical-align: top;
|
|
text-align: center;
|
|
line-height: 1.1;
|
|
font-size: 1.1em;
|
|
box-sizing: border-box;
|
|
color: transparent;
|
|
overflow: hidden;
|
|
}
|
|
input.resize-height,
|
|
textarea.resize-height,
|
|
.input.resize-height {
|
|
resize: vertical;
|
|
}
|
|
textarea {
|
|
padding: var(--_padding);
|
|
line-height: var(--post-line-height);
|
|
}
|
|
option {
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
}
|
|
.hide-number-spinner {
|
|
-moz-appearance: textfield;
|
|
}
|
|
.hide-number-spinner[type=number]::-webkit-inner-spin-button, .hide-number-spinner[type=number]::-webkit-outer-spin-button {
|
|
opacity: 0;
|
|
display: none;
|
|
}
|
|
.btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.btn-group {
|
|
position: relative;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
}
|
|
.btn-group button {
|
|
position: relative;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
.btn-group button:not(:last-child) {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
.btn-group button:not(:first-child) {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
.panel {
|
|
position: relative;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
}
|
|
.panel::after, .panel {
|
|
border-radius: 10px;
|
|
border-radius: var(--panelRadius, 10px);
|
|
}
|
|
.panel::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5;
|
|
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
|
|
box-shadow: var(--panelShadow);
|
|
pointer-events: none;
|
|
}
|
|
.panel-body {
|
|
padding: var(--panel-body-padding, 0);
|
|
}
|
|
.panel-body:empty::before {
|
|
content: "\AF\\_(\30C4)_/\AF";
|
|
display: block;
|
|
margin: 1em;
|
|
text-align: center;
|
|
}
|
|
.panel-body > p {
|
|
line-height: 1.3;
|
|
padding: 1em;
|
|
margin: 0;
|
|
}
|
|
.panel-heading,
|
|
.panel-footer {
|
|
--panel-heading-height-padding: 0.6em;
|
|
--__panel-heading-height: 3.2em;
|
|
--__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
-ms-grid-columns: minmax(50%, 1fr);
|
|
grid-template-columns: minmax(50%, 1fr);
|
|
grid-auto-columns: auto;
|
|
grid-column-gap: 0.5em;
|
|
-ms-flex: none;
|
|
flex: none;
|
|
background-size: cover;
|
|
padding: 0.6em;
|
|
height: var(--__panel-heading-height);
|
|
line-height: var(--__panel-heading-height-inner);
|
|
z-index: 4;
|
|
}
|
|
.panel-heading.-flexible-height,
|
|
.panel-footer.-flexible-height {
|
|
--__panel-heading-height: auto;
|
|
}
|
|
.panel-heading.-flexible-height::after, .panel-heading.-flexible-height::before,
|
|
.panel-footer.-flexible-height::after,
|
|
.panel-footer.-flexible-height::before {
|
|
display: none;
|
|
}
|
|
.panel-heading.-stub, .panel-heading.-stub::after,
|
|
.panel-footer.-stub,
|
|
.panel-footer.-stub::after {
|
|
border-radius: 10px;
|
|
border-radius: var(--panelRadius, 10px);
|
|
}
|
|
.panel-heading.-sticky,
|
|
.panel-footer.-sticky {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: var(--navbar-height);
|
|
}
|
|
.panel-heading::after, .panel-heading::before,
|
|
.panel-footer::after,
|
|
.panel-footer::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
}
|
|
.panel-heading .title,
|
|
.panel-footer .title {
|
|
font-size: 1.3em;
|
|
}
|
|
.panel-heading .alert,
|
|
.panel-footer .alert {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
}
|
|
.panel-heading:not(.-flexible-height) > .button-default,
|
|
.panel-heading:not(.-flexible-height) > .alert,
|
|
.panel-footer:not(.-flexible-height) > .button-default,
|
|
.panel-footer:not(.-flexible-height) > .alert {
|
|
height: var(--__panel-heading-height-inner);
|
|
min-height: 0;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
min-width: 1px;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
-ms-flex-item-align: stretch;
|
|
-ms-grid-row-align: stretch;
|
|
align-self: stretch;
|
|
}
|
|
.panel-heading {
|
|
border-radius: 10px 10px 0 0;
|
|
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
|
|
border-width: 0 0 1px 0;
|
|
-ms-flex-align: start;
|
|
align-items: start;
|
|
color: var(--panelText);
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
}
|
|
.panel-heading::after {
|
|
background-color: #182230;
|
|
background-color: var(--panel, #182230);
|
|
z-index: -2;
|
|
border-radius: 10px 10px 0 0;
|
|
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
|
|
box-shadow: var(--panelHeaderShadow);
|
|
}
|
|
.panel-heading a,
|
|
.panel-heading .-link {
|
|
color: #d8a070;
|
|
color: var(--panelLink, #d8a070);
|
|
}
|
|
.panel-heading .faint {
|
|
background-color: transparent;
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--panelFaint, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.panel-heading .faint-link {
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faintLink, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.panel-heading:not(.-flexible-height) > .button-default {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.panel-heading:not(.-flexible-height) > .button-default,
|
|
.panel-heading:not(.-flexible-height) > .button-default i[class*=icon-] {
|
|
color: #b9b9ba;
|
|
color: var(--btnPanelText, #b9b9ba);
|
|
}
|
|
.panel-heading:not(.-flexible-height) > .button-default:active {
|
|
background-color: #182230;
|
|
background-color: var(--btnPressedPanel, #182230);
|
|
color: #b9b9ba;
|
|
color: var(--btnPressedPanelText, #b9b9ba);
|
|
}
|
|
.panel-heading:not(.-flexible-height) > .button-default:disabled {
|
|
color: #b9b9ba;
|
|
color: var(--btnDisabledPanelText, #b9b9ba);
|
|
}
|
|
.panel-heading:not(.-flexible-height) > .button-default.toggled {
|
|
color: #b9b9ba;
|
|
color: var(--btnToggledPanelText, #b9b9ba);
|
|
}
|
|
.panel-footer {
|
|
border-radius: 0 0 10px 10px;
|
|
border-radius: 0 0 var(--panelRadius, 10px) var(--panelRadius, 10px);
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
border-width: 1px 0 0 0;
|
|
border-style: solid;
|
|
border-color: var(--border, #222);
|
|
}
|
|
.fa {
|
|
color: grey;
|
|
}
|
|
.mobile-shown {
|
|
display: none;
|
|
}
|
|
.badge {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
border-radius: 99px;
|
|
max-width: 10em;
|
|
min-width: 1.7em;
|
|
height: 1.3em;
|
|
padding: 0.15em 0.15em;
|
|
vertical-align: middle;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 0.9em;
|
|
line-height: 1;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.badge.badge-notification {
|
|
background-color: #ff0000;
|
|
background-color: var(--badgeNotification, #ff0000);
|
|
color: white;
|
|
color: var(--badgeNotificationText, white);
|
|
}
|
|
.alert {
|
|
margin: 0 0.35em;
|
|
padding: 0 0.25em;
|
|
border-radius: 5px;
|
|
border-radius: var(--tooltipRadius, 5px);
|
|
}
|
|
.alert.error {
|
|
background-color: rgba(211, 16, 20, 0.5);
|
|
background-color: var(--alertError, rgba(211, 16, 20, 0.5));
|
|
color: #b9b9ba;
|
|
color: var(--alertErrorText, #b9b9ba);
|
|
}
|
|
.panel-heading .alert.error {
|
|
color: #b9b9ba;
|
|
color: var(--alertErrorPanelText, #b9b9ba);
|
|
}
|
|
.alert.warning {
|
|
background-color: rgba(111, 111, 20, 0.5);
|
|
background-color: var(--alertWarning, rgba(111, 111, 20, 0.5));
|
|
color: #b9b9ba;
|
|
color: var(--alertWarningText, #b9b9ba);
|
|
}
|
|
.panel-heading .alert.warning {
|
|
color: #b9b9ba;
|
|
color: var(--alertWarningPanelText, #b9b9ba);
|
|
}
|
|
.alert.success {
|
|
background-color: var(--alertSuccess, rgba(111, 111, 20, 0.5));
|
|
color: var(--alertSuccessText, #b9b9ba);
|
|
}
|
|
.panel-heading .alert.success {
|
|
color: var(--alertSuccessPanelText, #b9b9ba);
|
|
}
|
|
.faint {
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.faint-link {
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
}
|
|
.faint-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.visibility-notice {
|
|
padding: 0.5em;
|
|
border: 1px solid rgba(185, 185, 186, 0.5);
|
|
border: 1px solid var(--faint, rgba(185, 185, 186, 0.5));
|
|
border-radius: 4px;
|
|
border-radius: var(--inputRadius, 4px);
|
|
}
|
|
.notice-dismissible {
|
|
padding-right: 4rem;
|
|
position: relative;
|
|
}
|
|
.notice-dismissible .dismiss {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0.5em;
|
|
color: inherit;
|
|
}
|
|
.fa-scale-110.svg-inline--fa {
|
|
font-size: 1.1em;
|
|
}
|
|
.fa-old-padding.svg-inline--fa {
|
|
padding: 0 0.3em;
|
|
}
|
|
.login-hint {
|
|
text-align: center;
|
|
}
|
|
@media all and (min-width: 801px) {
|
|
.login-hint {
|
|
display: none;
|
|
}
|
|
}
|
|
.login-hint a {
|
|
display: inline-block;
|
|
padding: 1em 0;
|
|
width: 100%;
|
|
}
|
|
.btn.button-default {
|
|
min-height: 2em;
|
|
}
|
|
.new-status-notification {
|
|
position: relative;
|
|
font-size: 1.1em;
|
|
z-index: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.mobile-hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
@keyframes shakeError {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
15% {
|
|
transform: translateX(0.375rem);
|
|
}
|
|
30% {
|
|
transform: translateX(-0.375rem);
|
|
}
|
|
45% {
|
|
transform: translateX(0.375rem);
|
|
}
|
|
60% {
|
|
transform: translateX(-0.375rem);
|
|
}
|
|
75% {
|
|
transform: translateX(0.375rem);
|
|
}
|
|
90% {
|
|
transform: translateX(-0.375rem);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s;
|
|
}
|
|
.fade-enter-from,
|
|
.fade-leave-active {
|
|
opacity: 0;
|
|
}
|
|
.thread-tree-replies {
|
|
margin-left: var(--status-margin, 0.75em);
|
|
border-left: 2px solid var(--border, #222);
|
|
}
|
|
.thread-tree-replies-hidden {
|
|
padding: var(--status-margin, 0.75em);
|
|
/* Make the button stretch along the whole row */
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.Conversation {
|
|
z-index: 1;
|
|
/* expanded conversation in timeline */
|
|
}
|
|
.Conversation .conversation-dive-to-top-level-box {
|
|
padding: var(--status-margin, 0.75em);
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: var(--border, #222);
|
|
border-radius: 0;
|
|
/* Make the button stretch along the whole row */
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.Conversation .thread-ancestors {
|
|
margin-left: var(--status-margin, 0.75em);
|
|
border-left: 2px solid var(--border, #222);
|
|
}
|
|
.Conversation .thread-ancestor.-faded .StatusContent {
|
|
--link: var(--faintLink);
|
|
--text: var(--faint);
|
|
color: var(--text);
|
|
}
|
|
.Conversation .thread-ancestor-dive-box {
|
|
padding-left: var(--status-margin, 0.75em);
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: var(--border, #222);
|
|
border-radius: 0;
|
|
/* Make the button stretch along the whole row */
|
|
}
|
|
.Conversation .thread-ancestor-dive-box, .Conversation .thread-ancestor-dive-box-inner {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: stretch;
|
|
align-items: stretch;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.Conversation .thread-ancestor-dive-box-inner {
|
|
padding: var(--status-margin, 0.75em);
|
|
}
|
|
.Conversation .conversation-status {
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: var(--border, #222);
|
|
border-radius: 0;
|
|
}
|
|
.Conversation .thread-ancestor-has-other-replies .conversation-status,
|
|
.Conversation .thread-ancestor:last-child .conversation-status,
|
|
.Conversation .thread-ancestor:last-child .thread-ancestor-dive-box, .Conversation:last-child .conversation-status, .Conversation.-expanded .thread-tree .conversation-status {
|
|
border-bottom: none;
|
|
}
|
|
.Conversation .thread-ancestors + .thread-tree > .conversation-status {
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
border-top-color: var(--border, #222);
|
|
}
|
|
.Conversation.status-fadein.-expanded .thread-body {
|
|
border-left-width: 4px;
|
|
border-left-style: solid;
|
|
border-left-color: #ff0000;
|
|
border-left-color: var(--cRed, #ff0000);
|
|
border-radius: 0 0 10px 10px;
|
|
border-radius: 0 0 var(--panelRadius, 10px) var(--panelRadius, 10px);
|
|
border-bottom: 1px solid var(--border, #222);
|
|
}
|
|
.Conversation.-expanded.status-fadein {
|
|
margin: calc(var(--status-margin, $status-margin) / 2);
|
|
}
|
|
.TimelineMenu {
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
margin-right: auto;
|
|
min-width: 0;
|
|
width: 24rem;
|
|
}
|
|
.TimelineMenu .popover-trigger-button {
|
|
vertical-align: bottom;
|
|
}
|
|
.TimelineMenu .timeline-menu-popover-wrap {
|
|
overflow: hidden;
|
|
margin-top: 0.6rem;
|
|
padding: 0 15px 15px 15px;
|
|
}
|
|
.TimelineMenu .timeline-menu-popover {
|
|
width: 24rem;
|
|
max-width: 100vw;
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
border-top-right-radius: 0;
|
|
border-top-left-radius: 0;
|
|
transform: translateY(-100%);
|
|
transition: transform 100ms;
|
|
}
|
|
.TimelineMenu .panel::after {
|
|
border-top-right-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
.TimelineMenu.open .timeline-menu-popover {
|
|
transform: translateY(0);
|
|
}
|
|
.TimelineMenu .timeline-menu-title {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
width: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.TimelineMenu .timeline-menu-title .timeline-menu-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.TimelineMenu .timeline-menu-title svg {
|
|
margin-left: 0.6em;
|
|
transition: transform 100ms;
|
|
}
|
|
.TimelineMenu .timeline-menu-title .click-blocker {
|
|
cursor: default;
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
}
|
|
.TimelineMenu.open .timeline-menu-title svg {
|
|
color: #b9b9ba;
|
|
color: var(--panelText, #b9b9ba);
|
|
transform: rotate(180deg);
|
|
}
|
|
.TimelineMenu .panel {
|
|
box-shadow: var(--popoverShadow);
|
|
}
|
|
.TimelineMenu ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.TimelineMenu li {
|
|
border-bottom: 1px solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
padding: 0;
|
|
}
|
|
.TimelineMenu li:last-child a {
|
|
border-bottom-right-radius: 10px;
|
|
border-bottom-right-radius: var(--panelRadius, 10px);
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-left-radius: var(--panelRadius, 10px);
|
|
}
|
|
.TimelineMenu li:last-child {
|
|
border: none;
|
|
}
|
|
.TimelineMenu a {
|
|
display: block;
|
|
padding: 0.6em 0.65em;
|
|
}
|
|
.TimelineMenu a:hover {
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedMenu, #151e2a);
|
|
color: #d8a070;
|
|
color: var(--selectedMenuText, #d8a070);
|
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
|
--icon: var(--selectedMenuIcon, $fallback--icon);
|
|
}
|
|
.TimelineMenu a.router-link-active {
|
|
font-weight: bolder;
|
|
background-color: #151e2a;
|
|
background-color: var(--selectedMenu, #151e2a);
|
|
color: #b9b9ba;
|
|
color: var(--selectedMenuText, #b9b9ba);
|
|
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
|
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
|
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
|
--icon: var(--selectedMenuIcon, $fallback--icon);
|
|
}
|
|
.TimelineMenu a.router-link-active:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.TimelineMenu a svg {
|
|
margin-right: 0.4em;
|
|
margin-left: -0.2em;
|
|
}
|
|
.TimelineQuickSettings > button {
|
|
line-height: 100%;
|
|
height: 100%;
|
|
width: var(--__panel-heading-height-inner);
|
|
text-align: center;
|
|
}
|
|
.TimelineQuickSettings > button svg {
|
|
font-size: 1.2em;
|
|
}
|
|
.Timeline .loadmore-text {
|
|
opacity: 1;
|
|
}
|
|
.Timeline.-blocked {
|
|
cursor: progress;
|
|
}
|
|
.Timeline .conversation-heading {
|
|
top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
|
|
z-index: 2;
|
|
}
|
|
.Timeline.-nonpanel .timeline-heading {
|
|
text-align: center;
|
|
line-height: 2.75em;
|
|
padding: 0 0.5em;
|
|
}
|
|
.Timeline.-nonpanel .timeline-heading .button-default, .Timeline.-nonpanel .timeline-heading .alert {
|
|
line-height: 2em;
|
|
width: 100%;
|
|
}
|
|
.tab-switcher {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.tab-switcher .tab-icon {
|
|
margin: 0.2em auto;
|
|
display: block;
|
|
}
|
|
.tab-switcher.top-tabs {
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.tab-switcher.top-tabs > .tabs {
|
|
width: 100%;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
padding-top: 5px;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
.tab-switcher.top-tabs > .tabs::after, .tab-switcher.top-tabs > .tabs::before {
|
|
content: "";
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
border-bottom: 1px solid;
|
|
border-bottom-color: #222;
|
|
border-bottom-color: var(--border, #222);
|
|
}
|
|
.tab-switcher.top-tabs > .tabs .tab-wrapper {
|
|
height: 2em;
|
|
}
|
|
.tab-switcher.top-tabs > .tabs .tab-wrapper:not(.active)::after {
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-bottom: 1px solid;
|
|
border-bottom-color: #222;
|
|
border-bottom-color: var(--border, #222);
|
|
}
|
|
.tab-switcher.top-tabs > .tabs .tab {
|
|
width: 100%;
|
|
min-width: 1px;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
padding-bottom: 99px;
|
|
margin-bottom: -93px;
|
|
}
|
|
.tab-switcher.top-tabs .contents.scrollable-tabs {
|
|
-ms-flex-preferred-size: 0;
|
|
flex-basis: 0;
|
|
}
|
|
.tab-switcher.side-tabs {
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.tab-switcher.side-tabs {
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
.tab-switcher.side-tabs > .contents {
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
.tab-switcher.side-tabs > .tabs {
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.tab-switcher.side-tabs > .tabs::after, .tab-switcher.side-tabs > .tabs::before {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
-ms-flex-preferred-size: 0.5em;
|
|
flex-basis: 0.5em;
|
|
content: "";
|
|
border-right: 1px solid;
|
|
border-right-color: #222;
|
|
border-right-color: var(--border, #222);
|
|
}
|
|
.tab-switcher.side-tabs > .tabs::after {
|
|
-ms-flex-positive: 1;
|
|
flex-grow: 1;
|
|
}
|
|
.tab-switcher.side-tabs > .tabs::before {
|
|
-ms-flex-positive: 0;
|
|
flex-grow: 0;
|
|
}
|
|
.tab-switcher.side-tabs > .tabs .tab-wrapper {
|
|
min-width: 10em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.tab-switcher.side-tabs > .tabs .tab-wrapper {
|
|
min-width: 4em;
|
|
}
|
|
}
|
|
.tab-switcher.side-tabs > .tabs .tab-wrapper:not(.active)::after {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-right: 1px solid;
|
|
border-right-color: #222;
|
|
border-right-color: var(--border, #222);
|
|
}
|
|
.tab-switcher.side-tabs > .tabs .tab-wrapper::before {
|
|
-ms-flex: 0 0 6px;
|
|
flex: 0 0 6px;
|
|
content: "";
|
|
border-right: 1px solid;
|
|
border-right-color: #222;
|
|
border-right-color: var(--border, #222);
|
|
}
|
|
.tab-switcher.side-tabs > .tabs .tab-wrapper:last-child .tab {
|
|
margin-bottom: 0;
|
|
}
|
|
.tab-switcher.side-tabs > .tabs .tab {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
box-sizing: content-box;
|
|
min-width: 10em;
|
|
min-width: 1px;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
padding-left: 1em;
|
|
padding-right: calc(1em + 200px);
|
|
margin-right: -200px;
|
|
margin-left: 1em;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.tab-switcher.side-tabs > .tabs .tab {
|
|
padding-left: 0.25em;
|
|
padding-right: calc(.25em + 200px);
|
|
margin-right: calc(.25em - 200px);
|
|
margin-left: 0.25em;
|
|
}
|
|
.tab-switcher.side-tabs > .tabs .tab .text {
|
|
display: none;
|
|
}
|
|
}
|
|
.tab-switcher .contents {
|
|
-ms-flex: 1 0 auto;
|
|
flex: 1 0 auto;
|
|
min-height: 0px;
|
|
}
|
|
.tab-switcher .contents .hidden {
|
|
display: none;
|
|
}
|
|
.tab-switcher .contents .full-height:not(.hidden) {
|
|
height: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.tab-switcher .contents .full-height:not(.hidden) > *:not(.mobile-label) {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.tab-switcher .contents.scrollable-tabs {
|
|
overflow-y: auto;
|
|
}
|
|
.tab-switcher .tab {
|
|
position: relative;
|
|
white-space: nowrap;
|
|
padding: 6px 1em;
|
|
}
|
|
.tab-switcher .tab:not(.active) {
|
|
z-index: 4;
|
|
}
|
|
.tab-switcher .tab:not(.active):hover {
|
|
z-index: 6;
|
|
}
|
|
.tab-switcher .tab.active {
|
|
background: transparent;
|
|
z-index: 5;
|
|
color: #b9b9ba;
|
|
color: var(--tabActiveText, #b9b9ba);
|
|
}
|
|
.tab-switcher .tab img {
|
|
max-height: 26px;
|
|
vertical-align: top;
|
|
margin-top: -5px;
|
|
}
|
|
.tab-switcher .tabs {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
.tab-switcher .tabs::after, .tab-switcher .tabs::before {
|
|
display: block;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
.tab-switcher .tab-wrapper {
|
|
position: relative;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
.tab-switcher .tab-wrapper:not(.active)::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 7;
|
|
}
|
|
.tab-switcher .mobile-label {
|
|
padding-left: 0.3em;
|
|
padding-bottom: 0.25em;
|
|
margin-top: 0.5em;
|
|
margin-left: 0.2em;
|
|
margin-bottom: 0.25em;
|
|
border-bottom: 1px solid var(--border, #222);
|
|
}
|
|
@media all and (min-width: 800px) {
|
|
.tab-switcher .mobile-label {
|
|
display: none;
|
|
}
|
|
}
|
|
.chat-title {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
--emoji-size: 14px;
|
|
}
|
|
.chat-title .username {
|
|
max-width: 100%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: inline;
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
}
|
|
.chat-title .avatar-container {
|
|
-ms-flex-item-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
line-height: 1;
|
|
}
|
|
.chat-title .titlebar-avatar {
|
|
margin-right: 0.5em;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
border-radius: 10px;
|
|
border-radius: var(--avatarAltRadius, 10px);
|
|
}
|
|
.chat-title .titlebar-avatar.animated::before {
|
|
display: none;
|
|
}
|
|
.chat-list-item {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
padding: 0.75em;
|
|
height: 5em;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
}
|
|
.chat-list-item :focus {
|
|
outline: none;
|
|
}
|
|
.chat-list-item:hover {
|
|
background-color: var(--selectedPost, #151e2a);
|
|
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.chat-list-item .chat-list-item-left {
|
|
margin-right: 1em;
|
|
}
|
|
.chat-list-item .chat-list-item-center {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
}
|
|
.chat-list-item .heading {
|
|
width: 100%;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
line-height: 1em;
|
|
}
|
|
.chat-list-item .heading-right {
|
|
white-space: nowrap;
|
|
}
|
|
.chat-list-item .name-and-account-name {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
-ms-flex-negative: 1;
|
|
flex-shrink: 1;
|
|
line-height: var(--post-line-height);
|
|
}
|
|
.chat-list-item .chat-preview {
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
margin: 0.35em 0;
|
|
color: #b9b9ba;
|
|
color: var(--faint, #b9b9ba);
|
|
width: 100%;
|
|
}
|
|
.chat-list-item a {
|
|
color: var(--faintLink, #d8a070);
|
|
text-decoration: none;
|
|
pointer-events: none;
|
|
}
|
|
.chat-list-item:hover .animated.avatar canvas {
|
|
display: none;
|
|
}
|
|
.chat-list-item:hover .animated.avatar img {
|
|
visibility: visible;
|
|
}
|
|
.chat-list-item .Avatar {
|
|
border-radius: 10px;
|
|
border-radius: var(--avatarAltRadius, 10px);
|
|
}
|
|
.chat-list-item .chat-preview-body {
|
|
--emoji-size: 1.4em;
|
|
}
|
|
.chat-list-item .time-wrapper {
|
|
line-height: var(--post-line-height);
|
|
}
|
|
.chat-list-item .chat-preview-body {
|
|
padding-right: 1em;
|
|
}
|
|
.basic-user-card {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex: 1 0;
|
|
flex: 1 0;
|
|
margin: 0;
|
|
padding: 0.6em 1em;
|
|
}
|
|
.basic-user-card-collapsed-content {
|
|
margin-left: 0.7em;
|
|
text-align: left;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.basic-user-card-user-name img {
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
height: 16px;
|
|
width: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
.basic-user-card-user-name-value, .basic-user-card-screen-name {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.basic-user-card-expanded-content {
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
margin-left: 0.7em;
|
|
min-width: 0;
|
|
}
|
|
.chat-new .input-wrap {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin: 0.7em 0.5em 0.7em 0.5em;
|
|
}
|
|
.chat-new .input-wrap input {
|
|
width: 100%;
|
|
}
|
|
.chat-new .search-icon {
|
|
margin-right: 0.3em;
|
|
}
|
|
.chat-new .member-list {
|
|
padding-bottom: 0.7rem;
|
|
}
|
|
.chat-new .basic-user-card:hover {
|
|
cursor: pointer;
|
|
background-color: var(--selectedPost, #151e2a);
|
|
}
|
|
.chat-new .go-back-button {
|
|
text-align: center;
|
|
line-height: 1;
|
|
height: 100%;
|
|
-ms-flex-item-align: start;
|
|
-ms-grid-row-align: start;
|
|
align-self: start;
|
|
width: var(--__panel-heading-height-inner);
|
|
}
|
|
.chat-list {
|
|
min-height: 25em;
|
|
margin-bottom: 0;
|
|
}
|
|
.emtpy-chat-list-alert {
|
|
padding: 3em;
|
|
font-size: 1.2em;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
color: #b9b9ba;
|
|
color: var(--faint, #b9b9ba);
|
|
}
|
|
.chat-message-wrapper.hovered-message-chain .animated.Avatar canvas {
|
|
display: none;
|
|
}
|
|
.chat-message-wrapper.hovered-message-chain .animated.Avatar img {
|
|
visibility: visible;
|
|
}
|
|
.chat-message-wrapper .chat-message-menu {
|
|
transition: opacity 0.1s;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: -0.8em;
|
|
}
|
|
.chat-message-wrapper .chat-message-menu button {
|
|
padding-top: 0.2em;
|
|
padding-bottom: 0.2em;
|
|
}
|
|
.chat-message-wrapper .menu-icon {
|
|
cursor: pointer;
|
|
}
|
|
.chat-message-wrapper .menu-icon:hover, .extra-button-popover.open .chat-message-wrapper .menu-icon {
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.chat-message-wrapper .popover {
|
|
width: 12em;
|
|
}
|
|
.chat-message-wrapper .chat-message {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
.chat-message-wrapper .chat-message .status-body:hover {
|
|
--_still-image-img-visibility: visible;
|
|
--_still-image-canvas-visibility: hidden;
|
|
--_still-image-label-visibility: hidden;
|
|
}
|
|
.chat-message-wrapper .avatar-wrapper {
|
|
margin-right: 0.72em;
|
|
width: 32px;
|
|
}
|
|
.chat-message-wrapper .link-preview, .chat-message-wrapper .attachments {
|
|
margin-bottom: 1em;
|
|
}
|
|
.chat-message-wrapper .chat-message-inner {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
max-width: 80%;
|
|
min-width: 10em;
|
|
width: 100%;
|
|
}
|
|
.chat-message-wrapper .chat-message-inner.with-media {
|
|
width: 100%;
|
|
}
|
|
.chat-message-wrapper .chat-message-inner.with-media .status {
|
|
width: 100%;
|
|
}
|
|
.chat-message-wrapper .status {
|
|
border-radius: 10px;
|
|
border-radius: var(--chatMessageRadius, 10px);
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: 0.75em;
|
|
}
|
|
.chat-message-wrapper .created-at {
|
|
position: relative;
|
|
float: right;
|
|
font-size: 0.8em;
|
|
margin: -1em 0 -0.5em 0;
|
|
font-style: italic;
|
|
opacity: 0.8;
|
|
}
|
|
.chat-message-wrapper .without-attachment .message-content .RichContent::after {
|
|
margin-right: 5.4em;
|
|
content: " ";
|
|
display: inline-block;
|
|
}
|
|
.chat-message-wrapper .pending .status-content.media-body, .chat-message-wrapper .pending .created-at {
|
|
color: var(--faint);
|
|
}
|
|
.chat-message-wrapper .error .status-content.media-body, .chat-message-wrapper .error .created-at {
|
|
color: #ff0000;
|
|
color: var(--badgeNotification, #ff0000);
|
|
}
|
|
.chat-message-wrapper .incoming a {
|
|
color: var(--chatMessageIncomingLink, #d8a070);
|
|
}
|
|
.chat-message-wrapper .incoming .status {
|
|
color: var(--chatMessageIncomingText, #b9b9ba);
|
|
background-color: var(--chatMessageIncomingBg, #121a24);
|
|
border: 1px solid var(--chatMessageIncomingBorder, --border);
|
|
}
|
|
.chat-message-wrapper .incoming .created-at a {
|
|
color: var(--chatMessageIncomingText, #b9b9ba);
|
|
}
|
|
.chat-message-wrapper .incoming .chat-message-menu {
|
|
left: 0.4rem;
|
|
}
|
|
.chat-message-wrapper .outgoing {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-ms-flex-line-pack: end;
|
|
align-content: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end;
|
|
}
|
|
.chat-message-wrapper .outgoing a {
|
|
color: var(--chatMessageOutgoingLink, #d8a070);
|
|
}
|
|
.chat-message-wrapper .outgoing .status {
|
|
color: var(--chatMessageOutgoingText, #b9b9ba);
|
|
background-color: var(--chatMessageOutgoingBg, #151e2a);
|
|
border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
|
|
}
|
|
.chat-message-wrapper .outgoing .chat-message-inner {
|
|
-ms-flex-align: end;
|
|
align-items: flex-end;
|
|
}
|
|
.chat-message-wrapper .outgoing .chat-message-menu {
|
|
right: 0.4rem;
|
|
}
|
|
.chat-message-wrapper .visible {
|
|
opacity: 1;
|
|
}
|
|
.chat-message-date-separator {
|
|
text-align: center;
|
|
margin: 1.4em 0;
|
|
font-size: 0.9em;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
color: #b9b9ba;
|
|
color: var(--faintedText, #b9b9ba);
|
|
}
|
|
.chat-view {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
.chat-view .chat-view-inner {
|
|
height: auto;
|
|
width: 100%;
|
|
overflow: visible;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.chat-view .chat-view-body {
|
|
box-sizing: border-box;
|
|
background-color: var(--chatBg, #121a24);
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
overflow: visible;
|
|
min-height: calc(100vh - var(--navbar-height));
|
|
margin: 0 0 0 0;
|
|
border-radius: 10px 10px 0 0;
|
|
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
|
|
}
|
|
.chat-view .chat-view-body::after {
|
|
border-radius: 0;
|
|
}
|
|
.chat-view .message-list {
|
|
padding: 0 0.8em;
|
|
height: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-pack: end;
|
|
justify-content: end;
|
|
}
|
|
.chat-view .footer {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
bottom: 0;
|
|
background-color: #121a24;
|
|
background-color: var(--bg, #121a24);
|
|
z-index: 1;
|
|
}
|
|
.chat-view .chat-view-heading {
|
|
-ms-grid-columns: auto minmax(50%, 1fr);
|
|
grid-template-columns: auto minmax(50%, 1fr);
|
|
}
|
|
.chat-view .go-back-button {
|
|
text-align: center;
|
|
line-height: 1;
|
|
height: 100%;
|
|
-ms-flex-item-align: start;
|
|
-ms-grid-row-align: start;
|
|
align-self: start;
|
|
width: var(--__panel-heading-height-inner);
|
|
}
|
|
.chat-view .jump-to-bottom-button {
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
border-radius: 100%;
|
|
position: absolute;
|
|
right: 1.3em;
|
|
top: -3.2em;
|
|
background-color: #182230;
|
|
background-color: var(--btn, #182230);
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
z-index: 10;
|
|
transition: 0.35s all;
|
|
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
cursor: pointer;
|
|
}
|
|
.chat-view .jump-to-bottom-button.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.chat-view .jump-to-bottom-button i {
|
|
font-size: 1em;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
.chat-view .jump-to-bottom-button .unread-message-count {
|
|
font-size: 0.8em;
|
|
left: 50%;
|
|
margin-top: -1rem;
|
|
padding: 0.1em;
|
|
border-radius: 50px;
|
|
position: absolute;
|
|
}
|
|
.chat-view .jump-to-bottom-button .chat-loading-error {
|
|
width: 100%;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: end;
|
|
align-items: flex-end;
|
|
height: 100%;
|
|
}
|
|
.chat-view .jump-to-bottom-button .chat-loading-error .error {
|
|
width: 100%;
|
|
}
|
|
.follow-card-content-container {
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
line-height: 1.5em;
|
|
}
|
|
.follow-card-follow-button {
|
|
margin-top: 0.5em;
|
|
margin-left: auto;
|
|
width: 10em;
|
|
}
|
|
.with-load-more-footer {
|
|
padding: 10px;
|
|
text-align: center;
|
|
border-top: 1px solid;
|
|
border-top-color: #222;
|
|
border-top-color: var(--border, #222);
|
|
}
|
|
.with-load-more-footer .error {
|
|
font-size: 1rem;
|
|
}
|
|
.with-load-more-footer a {
|
|
cursor: pointer;
|
|
}
|
|
.user-profile {
|
|
-ms-flex: 2;
|
|
flex: 2;
|
|
-ms-flex-preferred-size: 500px;
|
|
flex-basis: 500px;
|
|
--currentPanelStack: 1;
|
|
}
|
|
.user-profile .user-profile-fields {
|
|
margin: 0 0.5em;
|
|
}
|
|
.user-profile .user-profile-fields img {
|
|
-o-object-fit: contain;
|
|
object-fit: contain;
|
|
vertical-align: middle;
|
|
max-width: 100%;
|
|
max-height: 400px;
|
|
}
|
|
.user-profile .user-profile-fields img.emoji {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.user-profile .user-profile-fields .user-profile-field {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin: 0.25em;
|
|
border: 1px solid var(--border, #222);
|
|
border-radius: 4px;
|
|
border-radius: var(--inputRadius, 4px);
|
|
}
|
|
.user-profile .user-profile-fields .user-profile-field .user-profile-field-name {
|
|
-ms-flex: 0 1 30%;
|
|
flex: 0 1 30%;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
color: var(--lightText);
|
|
min-width: 120px;
|
|
border-right: 1px solid var(--border, #222);
|
|
}
|
|
.user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
|
|
-ms-flex: 1 1 70%;
|
|
flex: 1 1 70%;
|
|
color: var(--text);
|
|
margin: 0 0 0 0.25em;
|
|
}
|
|
.user-profile .user-profile-fields .user-profile-field .user-profile-field-name, .user-profile .user-profile-fields .user-profile-field .user-profile-field-value {
|
|
line-height: 1.3;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
padding: 0.5em 1.5em;
|
|
box-sizing: border-box;
|
|
}
|
|
.user-profile .userlist-placeholder {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex-align: middle;
|
|
align-items: middle;
|
|
padding: 2em;
|
|
}
|
|
.user-profile-placeholder .panel-body {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex-align: middle;
|
|
align-items: middle;
|
|
padding: 7em;
|
|
}
|
|
.search-result-heading {
|
|
color: rgba(185, 185, 186, 0.5);
|
|
color: var(--faint, rgba(185, 185, 186, 0.5));
|
|
padding: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.search-nav-heading .tab-switcher .tabs .tab-wrapper {
|
|
display: block;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.search-result {
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid;
|
|
border-color: #222;
|
|
border-color: var(--border, #222);
|
|
}
|
|
.search-result-footer {
|
|
border-width: 1px 0 0 0;
|
|
border-style: solid;
|
|
border-color: var(--border, #222);
|
|
padding: 10px;
|
|
background-color: #182230;
|
|
background-color: var(--panel, #182230);
|
|
}
|
|
.search-input-container {
|
|
padding: 0.8rem;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.search-input-container .search-input {
|
|
width: 100%;
|
|
line-height: 1.125rem;
|
|
font-size: 1rem;
|
|
padding: 0.5rem;
|
|
box-sizing: border-box;
|
|
}
|
|
.search-input-container .search-button {
|
|
margin-left: 0.5em;
|
|
}
|
|
.loading-icon {
|
|
padding: 1em;
|
|
}
|
|
.trend {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.trend .hashtag {
|
|
-ms-flex: 1 1 auto;
|
|
flex: 1 1 auto;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.trend .count {
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: 2rem;
|
|
font-size: 1.5rem;
|
|
line-height: 2.25rem;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color: #b9b9ba;
|
|
color: var(--text, #b9b9ba);
|
|
}
|
|
@charset "UTF-8";
|
|
.registration-form {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
margin: 0.6em;
|
|
}
|
|
.registration-form .container {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
}
|
|
.registration-form .container > * {
|
|
min-width: 0;
|
|
}
|
|
.registration-form .terms-of-service {
|
|
-ms-flex: 0 1 50%;
|
|
flex: 0 1 50%;
|
|
margin: 0.8em;
|
|
}
|
|
.registration-form .text-fields {
|
|
margin-top: 0.6em;
|
|
-ms-flex: 1 0;
|
|
flex: 1 0;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
.registration-form textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
.registration-form .form-group {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding: 0.3em 0;
|
|
line-height: 2;
|
|
margin-bottom: 1em;
|
|
}
|
|
.registration-form .form-group--error {
|
|
animation-name: shakeError;
|
|
animation-duration: 0.6s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.registration-form .form-group--error .form--label {
|
|
color: #f04124;
|
|
color: var(--cRed, #f04124);
|
|
}
|
|
.registration-form .form-error {
|
|
margin-top: -0.7em;
|
|
text-align: left;
|
|
}
|
|
.registration-form .form-error span {
|
|
font-size: 0.85em;
|
|
}
|
|
.registration-form .form-error ul {
|
|
list-style: none;
|
|
padding: 0 0 0 5px;
|
|
margin-top: 0;
|
|
}
|
|
.registration-form .form-error ul li::before {
|
|
content: "\2022 ";
|
|
}
|
|
.registration-form form textarea {
|
|
line-height: 16px;
|
|
resize: vertical;
|
|
}
|
|
.registration-form .captcha {
|
|
max-width: 350px;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
.registration-form .btn {
|
|
margin-top: 0.6em;
|
|
height: 2em;
|
|
}
|
|
.registration-form .error {
|
|
text-align: center;
|
|
}
|
|
@media all and (max-width: 800px) {
|
|
.registration-form .container {
|
|
-ms-flex-direction: column-reverse;
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
.password-reset-form {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
margin: 0.6em;
|
|
}
|
|
.password-reset-form .container {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex: 1 0;
|
|
flex: 1 0;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
margin-top: 0.6em;
|
|
max-width: 18rem;
|
|
}
|
|
.password-reset-form .container > * {
|
|
min-width: 0;
|
|
}
|
|
.password-reset-form .form-group {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
margin-bottom: 1em;
|
|
padding: 0.3em 0;
|
|
line-height: 1.85em;
|
|
}
|
|
.password-reset-form .error {
|
|
text-align: center;
|
|
animation-name: shakeError;
|
|
animation-duration: 0.4s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
.password-reset-form .alert {
|
|
padding: 0.5em;
|
|
margin: 0.3em 0 1em;
|
|
}
|
|
.password-reset-form .password-reset-required {
|
|
background-color: var(--alertError, rgba(211, 16, 20, 0.5));
|
|
padding: 10px 0;
|
|
}
|
|
.password-reset-form .notice-dismissible {
|
|
padding-right: 2rem;
|
|
}
|
|
.password-reset-form .dismiss {
|
|
cursor: pointer;
|
|
}
|
|
.follow-request-card-content-container {
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.follow-request-card-content-container button {
|
|
margin-top: 0.5em;
|
|
margin-right: 0.5em;
|
|
-ms-flex: 1 1;
|
|
flex: 1 1;
|
|
max-width: 12em;
|
|
min-width: 8em;
|
|
}
|
|
.follow-request-card-content-container button:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.tos-content {
|
|
margin: 1em;
|
|
}
|
|
.staff-group {
|
|
padding-left: 1em;
|
|
padding-top: 1em;
|
|
}
|
|
.staff-group .basic-user-card {
|
|
padding-left: 0;
|
|
}
|
|
.mrf-section {
|
|
margin: 1em;
|
|
}
|
|
.mrf-section table {
|
|
width: 100%;
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.mrf-section table th, .mrf-section table td {
|
|
width: 180px;
|
|
max-width: 360px;
|
|
overflow: hidden;
|
|
vertical-align: text-top;
|
|
}
|
|
.mrf-section table th + th, .mrf-section table td + td {
|
|
width: auto;
|
|
}
|
|
|
|
/*# sourceMappingURL=app.ff49eba8c60fb923a345.css.map*/ |