random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated status-card styles

Browse Source
This commit is contained in:
mgabdev 2019-08-26 21:57:40 -04:00
parent 32b04999b1
commit 8d31d29d60
1 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/javascript/styles/gabsocial/components.scss
View File

@ -2192,13 +2192,14 @@ a.account__display-name {
.status-card {
display: flex;
font-size: 14px;
border: 1px solid lighten($ui-base-color, 8%);
font-size: 15px;
border: 1px solid lighten($ui-base-color, 12%);
border-radius: 4px;
color: $dark-text-color;
margin-top: 14px;
text-decoration: none;
overflow: hidden;
flex-direction: column;
&__actions {
bottom: 0;
@ -2274,7 +2275,7 @@ a.status-card {
display: block;
font-weight: 500;
margin-bottom: 5px;
color: $darker-text-color;
color: $primary-text-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -2284,26 +2285,33 @@ a.status-card {
.status-card__content {
flex: 1 1 auto;
overflow: hidden;
padding: 14px 14px 14px 8px;
padding: 12px 10px;
border-top: 1px solid lighten($ui-base-color, 12%);
}
.status-card__description {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 40px;
overflow: hidden;
color: $darker-text-color;
}
.status-card__host {
display: block;
margin-top: 5px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $darker-text-color;
}
.status-card__image {
flex: 0 0 100px;
background: lighten($ui-base-color, 8%);
display: block;
padding-bottom: 52.25%;
position: relative;
background: lighten($ui-base-color, 8%);
& > .fa {
font-size: 21px;
@ -2332,7 +2340,7 @@ a.status-card {
}
.status-card.compact {
border-color: lighten($ui-base-color, 4%);
flex-direction: row;
&.interactive {
border: 0;
@ -2348,7 +2356,8 @@ a.status-card {
}
.status-card__image {
flex: 0 0 60px;
flex: 0 0 94px;
padding-bottom: 0;
}
}
@ -2357,11 +2366,13 @@ a.status-card.compact:hover {
}
.status-card__image-image {
border-radius: 4px 0 0 4px;
display: block;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: center center;