mobile-newline #226

Merged
floatingghost merged 3 commits from Beefox/fox-fe:mobile-newline into develop 2022-11-21 16:49:19 +00:00
2 changed files with 1 additions and 355 deletions
Showing only changes of commit e506a2044e - Show all commits

1
.gitignore vendored
View file

@ -9,3 +9,4 @@ selenium-debug.log
config/local.json
config/local.*.json
docs/site/
.vscode/

View file

@ -1,355 +0,0 @@
.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;
}
}