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