118 lines
2.0 KiB
SCSS
118 lines
2.0 KiB
SCSS
|
.status {
|
||
|
padding: 8px 10px;
|
||
|
padding-left: 68px;
|
||
|
position: relative;
|
||
|
min-height: 54px;
|
||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||
|
cursor: default;
|
||
|
|
||
|
@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
|
||
|
// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
|
||
|
// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
|
||
|
padding-right: 26px; // 10px + 16px
|
||
|
}
|
||
|
|
||
|
@keyframes fade {
|
||
|
0% {
|
||
|
opacity: 0;
|
||
|
}
|
||
|
|
||
|
100% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
opacity: 1;
|
||
|
animation: fade 150ms linear;
|
||
|
|
||
|
.video-player {
|
||
|
margin-top: 8px;
|
||
|
}
|
||
|
|
||
|
&.status-direct:not(.read) {
|
||
|
background: lighten($ui-base-color, 8%);
|
||
|
border-bottom-color: lighten($ui-base-color, 12%);
|
||
|
}
|
||
|
|
||
|
&.light {
|
||
|
.status__relative-time {
|
||
|
color: $light-text-color;
|
||
|
}
|
||
|
|
||
|
.status__display-name {
|
||
|
color: $inverted-text-color;
|
||
|
}
|
||
|
|
||
|
.display-name {
|
||
|
strong {
|
||
|
color: $inverted-text-color;
|
||
|
}
|
||
|
|
||
|
span {
|
||
|
color: $light-text-color;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.status__content {
|
||
|
color: $inverted-text-color;
|
||
|
|
||
|
a {
|
||
|
color: $highlight-text-color;
|
||
|
}
|
||
|
|
||
|
a.status__content__spoiler-link {
|
||
|
color: $primary-text-color;
|
||
|
background: $ui-primary-color;
|
||
|
|
||
|
&:hover {
|
||
|
background: lighten($ui-primary-color, 8%);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&__meta {
|
||
|
font-size: 14px;
|
||
|
color: $gab-secondary-text;
|
||
|
|
||
|
a {
|
||
|
color: $gab-brand-default;
|
||
|
font-weight: bold;
|
||
|
text-decoration: none;
|
||
|
|
||
|
&:hover {
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@media screen and (min-width:630px) {
|
||
|
.status {
|
||
|
padding: 15px 15px 15px 78px;
|
||
|
min-height: 50px;
|
||
|
|
||
|
&__avatar {
|
||
|
left: 15px;
|
||
|
top: 17px;
|
||
|
}
|
||
|
|
||
|
&__content {
|
||
|
padding-top: 5px;
|
||
|
}
|
||
|
|
||
|
&__prepend {
|
||
|
margin-left: 78px;
|
||
|
padding-top: 15px;
|
||
|
}
|
||
|
|
||
|
&__prepend-icon-wrapper {
|
||
|
left: -32px;
|
||
|
}
|
||
|
|
||
|
.media-gallery,
|
||
|
.video-player {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
}
|
||
|
}
|