nitter/src/sass/tweet/quote.scss

108 lines
1.7 KiB
SCSS
Raw Normal View History

2019-09-13 08:44:21 +00:00
@import '_variables';
.quote {
margin-top: 10px;
border: solid 1px $dark_grey;
border-radius: 10px;
background-color: $bg_elements;
overflow: auto;
padding: 6px;
position: relative;
2019-09-19 01:19:06 +00:00
pointer-events: all;
2019-09-13 08:44:21 +00:00
&:hover {
border-color: $grey;
}
&.unavailable:hover {
border-color: $dark_grey;
}
}
.unavailable-quote {
padding: 6px;
}
.quote-link {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
2019-09-19 01:19:06 +00:00
}
.quote .quote-link {
2019-09-19 00:29:24 +00:00
z-index: 1;
2019-09-13 08:44:21 +00:00
}
.quote-text {
overflow: hidden;
white-space: pre-wrap;
word-wrap: break-word;
}
.quote-media-container {
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
max-height: 102px;
width: 102px;
float: left;
margin-right: 7px;
border-radius: 7px;
position: relative;
}
.quote-media {
display: flex;
justify-content: center;
pointer-events: none;
img {
width: 100%;
height: 100%;
align-self: center;
}
}
.quote-badge {
left: 0;
bottom: 0;
position: absolute;
z-index: 1;
align-self: flex-end;
}
.quote-badge-text {
margin: 4px;
background: $shadow;
border-radius: 4px;
color: #fffffff0;
padding: 1px 3px;
font-size: 12px;
font-weight: bold;
}
.quote-sensitive {
background: $darker_grey;
width: 102px;
height: 102px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
}
.quote-sensitive-icon {
font-size: 40px;
color: $grey;
}
@media(max-width: 600px) {
.quote-media-container {
width: 70px;
max-height: 70px;
}
}