Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Updated bookmark card CSS

Browse source
This commit is contained in:
Sodbileg Gansukh 2021-11-17 18:23:46 +08:00
parent dad9dba872
commit 43ec108f75
1 changed files with 71 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
core/frontend/src/cards/css/bookmark.css
View file

@ -1,83 +1,101 @@
/* style.css */ .kg-bookmark-card,
.kg-bookmark-publisher {
.kg-bookmark-card {
width: 100%;
position: relative; position: relative;
width: 100%;
} }
.kg-bookmark-container { .kg-bookmark-container,
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
color: currentColor;
font-family: inherit;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.kg-bookmark-container:hover { .kg-bookmark-container:hover {
display: flex;
text-decoration: none; text-decoration: none;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%);
overflow: hidden;
} }
.kg-bookmark-content { .kg-bookmark-content {
flex-basis: 0; display: flex;
flex-grow: 999; flex-direction: column;
flex-grow: 1;
flex-basis: 100%;
align-items: flex-start;
justify-content: flex-start;
padding: 20px; padding: 20px;
order: 1;
} }
.kg-bookmark-title { .kg-bookmark-title {
font-size: 1.5rem;
line-height: 1.4em;
font-weight: 600; font-weight: 600;
} }
.kg-bookmark-metadata,
.kg-bookmark-description {
margin-top: .5em;
}
.kg-bookmark-metadata {
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kg-bookmark-description { .kg-bookmark-description {
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; font-size: 1.4rem;
line-height: 1.5em;
margin-top: 3px;
font-weight: 400;
max-height: 44px;
overflow-y: hidden;
opacity: 0.7;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; -webkit-box-orient: vertical;
}
.kg-bookmark-metadata {
display: flex;
align-items: center;
margin-top: 22px;
width: 100%;
font-size: 1.4rem;
font-weight: 500;
}
.kg-bookmark-metadata > *:not(img) {
opacity: 0.7;
} }
.kg-bookmark-icon { .kg-bookmark-icon {
display: inline-block; width: 20px;
width: 1em; height: 20px;
height: 1em; margin-right: 6px;
vertical-align: text-bottom; }
margin-right: .5em;
margin-bottom: .05em; .kg-bookmark-author,
.kg-bookmark-publisher {
display: inline;
}
.kg-bookmark-publisher {
text-overflow: ellipsis;
overflow: hidden;
max-width: 240px;
white-space: nowrap;
display: block;
line-height: 1.65em;
}
.kg-bookmark-metadata > span:nth-of-type(2) {
font-weight: 400;
}
.kg-bookmark-metadata > span:nth-of-type(2):before {
content: "•";
margin: 0 6px;
} }
.kg-bookmark-thumbnail { .kg-bookmark-thumbnail {
display: flex; position: relative;
flex-basis: 24rem;
flex-grow: 1; flex-grow: 1;
min-width: 33%;
} }
.kg-bookmark-thumbnail img { .kg-bookmark-thumbnail img {
max-width: 100%; width: 100%;
height: auto; height: 100%;
vertical-align: bottom;
object-fit: cover; object-fit: cover;
} position: absolute;
top: 0;
.kg-bookmark-author { left: 0;
white-space: nowrap; border-radius: 0 4px 4px 0;
text-overflow: ellipsis;
overflow: hidden;
}
.kg-bookmark-publisher::before {
content: "•";
margin: 0 .5em;
} }