nitter/src/sass/tweet/_base.scss

157 lines
2.4 KiB
SCSS

@import '_variables';
@import '_mixins';
@import 'thread';
@import 'media';
@import 'video';
@import 'card';
@import 'poll';
@import 'quote';
.tweet-body {
flex: 1;
min-width: 0;
margin-left: 58px;
pointer-events: none;
z-index: 1;
}
.tweet-content {
font-family: $font_3;
line-height: 1.4em;
pointer-events: all;
}
.tweet-header {
padding: 0;
vertical-align: bottom;
flex-basis: 100%;
margin-bottom: .2em;
a {
display: inline-block;
word-break: break-all;
max-width: 100%;
pointer-events: all;
}
}
.tweet-name-row {
padding: 0;
display: flex;
justify-content: space-between;
}
.fullname-and-username {
display: flex;
min-width: 0;
}
.fullname {
@include ellipsis;
flex-shrink: 2;
max-width: 80%;
font-size: 14px;
font-weight: 700;
color: var(--fg_color);
}
.username {
@include ellipsis;
min-width: 1.6em;
margin-left: .4em;
word-wrap: normal;
}
.tweet-date {
display: flex;
flex-shrink: 0;
margin-left: 4px;
}
.tweet-date a, .username, .show-more a {
color: var(--fg_dark);
}
.tweet-published {
margin: 0;
margin-top: 5px;
color: var(--grey);
pointer-events: all;
}
.tweet-avatar {
display: contents !important;
img {
float: left;
margin-top: 3px;
margin-left: -58px;
width: 48px;
height: 48px;
border-radius: 50%;
}
}
.replying-to {
color: var(--fg_faded);
margin: -2px 0 4px;
a {
pointer-events: all;
}
}
.retweet-header, .pinned, .tweet-stats {
align-content: center;
color: var(--grey);
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
font-size: 14px;
font-weight: 600;
line-height: 22px;
span {
@include ellipsis;
}
}
.retweet-header {
margin-top: -5px !important;
}
.tweet-stats {
margin-bottom: -3px;
}
.tweet-stat {
padding-top: 5px;
padding-right: 8px;
}
.show-thread {
display: block;
pointer-events: all;
}
.unavailable-box {
width: 100%;
height: 100%;
padding: 12px;
border: solid 1px var(--dark_grey);
border-radius: 10px;
background-color: var(--bg_color);
}
.tweet-link {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
&:hover {
background-color: var(--bg_hover);
}
}