|
|
@ -473,78 +473,6 @@
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// --- Extra clickable area in the status gutter ---
|
|
|
|
|
|
|
|
.ui.wide {
|
|
|
|
|
|
|
|
@mixin xtraspaces-full {
|
|
|
|
|
|
|
|
height: calc(100% + 10px);
|
|
|
|
|
|
|
|
bottom: -40px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin xtraspaces-short {
|
|
|
|
|
|
|
|
height: calc(100% - 35px);
|
|
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Avi must go on top if the toot is too short
|
|
|
|
|
|
|
|
.status__avatar {
|
|
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Base styles
|
|
|
|
|
|
|
|
.status__content--with-action > div::after {
|
|
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
width: 64px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: -68px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// more than 4 never fit on FullHD, short
|
|
|
|
|
|
|
|
@include xtraspaces-short;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (min-width: 1800px) {
|
|
|
|
|
|
|
|
// 4, very wide screen
|
|
|
|
|
|
|
|
.column:nth-child(2):nth-last-child(4) {
|
|
|
|
|
|
|
|
&, & ~ .column {
|
|
|
|
|
|
|
|
.status__content--with-action > div::after {
|
|
|
|
|
|
|
|
@include xtraspaces-full;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 1 or 2, always fit
|
|
|
|
|
|
|
|
.column:nth-child(2):nth-last-child(1),
|
|
|
|
|
|
|
|
.column:nth-child(2):nth-last-child(2),
|
|
|
|
|
|
|
|
.column:nth-child(2):nth-last-child(3) {
|
|
|
|
|
|
|
|
&, & ~ .column {
|
|
|
|
|
|
|
|
.status__content--with-action > div::after {
|
|
|
|
|
|
|
|
@include xtraspaces-full;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 1440px) {
|
|
|
|
|
|
|
|
// 3, small screen
|
|
|
|
|
|
|
|
.column:nth-child(2):nth-last-child(3) {
|
|
|
|
|
|
|
|
&, & ~ .column {
|
|
|
|
|
|
|
|
.status__content--with-action > div::after {
|
|
|
|
|
|
|
|
@include xtraspaces-short;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Phone or iPad
|
|
|
|
|
|
|
|
@media screen and (max-width: 1060px) {
|
|
|
|
|
|
|
|
.status__content--with-action > div::after {
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// I am very sorry
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// --- end extra clickable spaces ---
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.status-check-box {
|
|
|
|
.status-check-box {
|
|
|
|
.status__content,
|
|
|
|
.status__content,
|
|
|
|
.reply-indicator__content {
|
|
|
|
.reply-indicator__content {
|
|
|
|