Hi, I have a CSS snippet that adds a bit of design to my book cards, but my main problem was that as I added new fields to the card, its height increased, maybe someone has encountered this, how can I reduce the height of all the cards at once.
How its looks:
Here I share the code of my snippet:
/* FOR BOOK STYLE */
/* Hide labels */
.bases-cards-group .bases-cards-property[data-property="note.Book_Author"] .bases-cards-label,
.bases-cards-group .bases-cards-property[data-property="note.Book_Genre"] .bases-cards-label,
.bases-cards-group .bases-cards-property[data-property="note.Book_Status"] .bases-cards-label {
display: none !important;
}
/* Author */
.bases-cards-group .bases-cards-property[data-property="note.Book_Author"] {
transform: translateY(calc(-0.4 * var(--bases-cards-line-height)));
}
.bases-cards-group .bases-cards-property[data-property="note.Book_Author"] .bases-rendered-value{
opacity: .65;
font-size: .95em;
}
/* Genre */
.bases-cards-group .bases-cards-property[data-property="note.Book_Genre"] {
transform: translateY(calc(-1.3 * var(--bases-cards-line-height)));
}
.bases-cards-group .bases-cards-property[data-property="note.Book_Genre"] .value-list-element {
padding: 2px 6px;
font-size:.9em;
color: var(--tag-color);
background: var(--tag-background);
border: 1px solid var(--tag-border-color, var(--tag-background));
border-radius: 7px;
}
/* Start and Finish Reading */
.bases-cards-group .bases-cards-property[data-property="note.Book_StartDate"] {
transform: translateY(calc(-2* var(--bases-cards-line-height)));
}
.bases-cards-group .bases-cards-property[data-property="note.Book_FinishDate"] {
transform: translateY(calc(-2* var(--bases-cards-line-height)));
}
/* Status */
.bases-cards-group .bases-cards-property[data-property="note.Book_Status"] {
transform: translateY(calc(-13.2* var(--bases-cards-line-height)));
left: auto !important;
right: .2em !important;
}
.bases-cards-group .bases-cards-property[data-property="note.Book_Status"] .bases-rendered-value {
display:inline-block;
font-weight: bold;
text-transform:uppercase;
letter-spacing:.0em;
padding: .25em .8em;
border-radius:7px;
background: rgba(0, 0, 0, 0.7);
border:1.5px solid var(--background-modifier-border);
}
/* Rating */
.bases-cards-group .bases-cards-property[data-property="formula.Rating"] {
transform: translateY(calc(-1.3* var(--bases-cards-line-height)));
font-weight: bold;
}
.bases-cards-group .bases-cards-property[data-property="formula.Rating"] .bases-rendered-value {
display: flex;
font-weight: bold;
font-size: 1.16em;
padding: .0em .3em;
}
