gab-social/app/javascript/gabsocial/components/status/status.scss

118 lines
2.0 KiB
SCSS
Raw Normal View History

.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;
}
}
}