Added auto line break to allow people to more easily see handle
This commit is contained in:
parent
169282ea42
commit
790647e0a0
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,355 @@
|
|||
.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: flex;
|
||||
}
|
||||
.Status .gravestone .deleted-text {
|
||||
margin: 0.5em 0;
|
||||
align-items: center;
|
||||
}
|
||||
.Status .status-container {
|
||||
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: flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
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;
|
||||
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 .status-heading .emoji {
|
||||
--emoji-size: 16px;
|
||||
}
|
||||
.Status .heading-name-row {
|
||||
display: flex;
|
||||
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;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
.Status .heading-left {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.Status .heading-left img {
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
.Status .heading-left .nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.Status .heading-right {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.Status .heading-right .button-unstyled {
|
||||
padding: 5px;
|
||||
margin: -5px;
|
||||
height: min-content;
|
||||
}
|
||||
.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: inline-flex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.Status .timeago {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
.Status .heading-reply-row, .Status .heading-edited-row {
|
||||
position: relative;
|
||||
align-content: baseline;
|
||||
font-size: 0.85em;
|
||||
margin-top: 0.2em;
|
||||
line-height: 130%;
|
||||
max-width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
.Status .reply-to-popover, .Status .reply-to-no-popover, .Status .mentions {
|
||||
min-width: 0;
|
||||
margin-right: 0.4em;
|
||||
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: flex;
|
||||
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;
|
||||
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: flex;
|
||||
margin-top: var(--status-margin, 0.75em);
|
||||
}
|
||||
.Status .status-actions > * {
|
||||
max-width: 4em;
|
||||
flex: 1;
|
||||
}
|
||||
.Status .muted {
|
||||
padding: 0.25em 0.6em;
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
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;
|
||||
flex: 0 1 auto;
|
||||
margin-right: 0.2em;
|
||||
font-size: smaller;
|
||||
}
|
||||
.Status .muted .mute-thread {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.Status .muted .mute-words {
|
||||
flex: 1 0 5em;
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
.Status .muted .mute-words::before {
|
||||
content: " ";
|
||||
}
|
||||
.Status .muted .unmute {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
}
|
||||
.Status .reply-form {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.Status .reply-body {
|
||||
flex: 1;
|
||||
}
|
||||
.Status .quote-form {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.Status .quote-body {
|
||||
flex: 1;
|
||||
}
|
||||
.Status .favs-repeated-users {
|
||||
margin-top: var(--status-margin, 0.75em);
|
||||
}
|
||||
.Status .stats {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
line-height: 1em;
|
||||
}
|
||||
.Status .avatar-row {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -130,6 +130,13 @@
|
|||
.heading-left {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-wrap: wrap;
|
||||
img {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
.nowrap{
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.heading-right {
|
||||
|
|
@ -140,6 +147,8 @@
|
|||
padding: 5px;
|
||||
margin: -5px;
|
||||
|
||||
height: min-content;
|
||||
|
||||
&:hover svg {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
|
|
|
|||
|
|
@ -166,19 +166,21 @@
|
|||
>
|
||||
{{ status.user.name }}
|
||||
</h4>
|
||||
<router-link
|
||||
class="account-name"
|
||||
:title="status.user.screen_name_ui"
|
||||
:to="userProfileLink"
|
||||
>
|
||||
{{ status.user.screen_name_ui }}
|
||||
</router-link>
|
||||
<img
|
||||
v-if="!!(status.user && status.user.favicon)"
|
||||
class="status-favicon"
|
||||
:src="status.user.favicon"
|
||||
:title="faviconAlt(status)"
|
||||
>
|
||||
<span class="nowrap">
|
||||
<router-link
|
||||
class="account-name"
|
||||
:title="status.user.screen_name_ui"
|
||||
:to="userProfileLink"
|
||||
>
|
||||
@{{ status.user.screen_name_ui }}
|
||||
</router-link>
|
||||
<img
|
||||
v-if="!!(status.user && status.user.favicon)"
|
||||
class="status-favicon"
|
||||
:src="status.user.favicon"
|
||||
:title="faviconAlt(status)"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="heading-right">
|
||||
|
|
|
|||
Loading…
Reference in New Issue