siyuan/app/src/assets/scss/component/_card.scss

70 lines
1.3 KiB
SCSS

.b3-card {
box-shadow: var(--b3-point-shadow);
background-color: var(--b3-theme-surface);
border-radius: 4px;
margin: 16px;
overflow: hidden;
position: relative;
transition: var(--b3-transition);
cursor: pointer;
border: 1px solid var(--b3-theme-surface-lighter);
display: flex;
&--wrap {
width: calc(50% - 18px);
margin: 16px 0 0 16px;
min-width: 342px;
}
&:hover {
background-color: var(--b3-theme-surface-lighter);
transform: translate(0px, -4px);
box-shadow: var(--b3-dialog-shadow);
}
&s {
display: flex;
flex-wrap: wrap;
margin: 0 16px 16px 0;
}
&--current .b3-card__info,
&--current .b3-card__actions {
background-color: var(--b3-theme-primary-lightest)
}
&__img {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
img {
height: 100%;
object-fit: cover;
}
}
&__info {
padding: 8px 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
a {
color: var(--b3-theme-on-background);
&:hover {
color: var(--b3-theme-on-surface);
}
}
}
&__actions {
padding: 0 16px 8px 16px;
display: flex;
height: 36px;
box-sizing: border-box;
}
}