bifocal/node_modules/@tryghost/shared-theme-assets/assets/css/v2/general/card.css

206 lines
4.5 KiB
CSS

/* Add extra margin before/after any cards,
except for when immediately preceeded by a heading */
.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
margin-top: calc(2em * var(--content-spacing-multiplier, 1));
}
.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
margin-top: calc(2em * var(--content-spacing-multiplier, 1));
}
.gh-content :not(.kg-card):not([id]) + .kg-card:is(.kg-width-wide, .kg-width-full) {
margin-top: calc(4em * var(--content-spacing-multiplier, 1));
}
.gh-content .kg-card:is(.kg-width-wide, .kg-width-full) + :not(.kg-card):not([id]) {
margin-top: calc(4em * var(--content-spacing-multiplier, 1));
}
/* Remove space between full-width cards */
.gh-content > .kg-width-full + .kg-width-full:not(.kg-width-full.kg-card-hascaption + .kg-width-full) {
margin-top: 0;
}
/* Image
/* ---------------------------------------------------------- */
.kg-image {
margin-right: auto;
margin-left: auto;
}
/* Embed
/* ---------------------------------------------------------- */
.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Gallery
/* ---------------------------------------------------------- */
.kg-image[width][height],
.kg-gallery-image {
cursor: pointer;
}
.kg-image-card a:hover,
.kg-gallery-image a:hover {
opacity: 1 !important;
}
/* Toggle
/* ---------------------------------------------------------- */
.kg-card.kg-toggle-card .kg-toggle-heading-text {
font-size: 2rem;
font-weight: 700;
}
.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
font-family: var(--font-serif);
}
/* Callout
/* ---------------------------------------------------------- */
.kg-callout-card.kg-card {
border-radius: 0.25em;
}
.kg-callout-card-accent a {
text-decoration: underline;
}
/* Blockquote
/* ---------------------------------------------------------- */
blockquote:not([class]) {
padding-left: 2rem;
border-left: 4px solid var(--ghost-accent-color);
}
blockquote.kg-blockquote-alt {
font-style: normal;
font-weight: 400;
color: var(--color-secondary-text);
}
/* Button
/* ---------------------------------------------------------- */
.kg-card.kg-button-card .kg-btn {
font-size: 1em;
}
/* Header
/* ---------------------------------------------------------- */
.has-serif-title .kg-card.kg-header-card h2.kg-header-card-header {
font-family: var(--font-serif);
}
.has-serif-body .kg-header-card h3.kg-header-card-subheader {
font-family: var(--font-serif);
}
/* Bookmark
/* ---------------------------------------------------------- */
.kg-bookmark-card .kg-bookmark-container {
border-radius: 0.25em !important;
}
.kg-bookmark-card .kg-bookmark-content {
padding: 1.15em;
}
.kg-bookmark-card .kg-bookmark-title {
font-size: 0.9em;
}
.kg-bookmark-card .kg-bookmark-description {
max-height: none;
margin-top: 0.3em;
font-size: 0.8em;
}
.kg-bookmark-card .kg-bookmark-metadata {
font-size: 0.8em;
}
.kg-bookmark-card .kg-bookmark-thumbnail img {
border-radius: 0 0.2em 0.2em 0;
}
/* Product
/* ---------------------------------------------------------- */
.kg-product-card.kg-card .kg-product-card-image {
margin-bottom: 12px;
}
.kg-product-card.kg-card a.kg-product-card-button {
height: 2.8em;
margin-top: 12px;
}
.is-font-serif .kg-product-card.kg-card .kg-product-card-title,
.is-font-serif .kg-product-card.kg-card .kg-product-card-description :is(p, ul, ol),
.is-font-serif .kg-product-card.kg-card .kg-product-card-button {
font-family: var(--font-serif);
}
/* File
/* ---------------------------------------------------------- */
.kg-file-card.kg-card .kg-file-card-container {
padding: 0.6em;
}
.kg-file-card.kg-card .kg-file-card-contents {
margin: 4px 8px 6px;
}
.kg-file-card.kg-card .kg-file-card-metadata {
font-size: 0.9em;
}
.kg-file-card.kg-card .kg-file-card-filesize::before {
margin-right: 6px;
margin-left: 6px;
}
/* Audio
/* ---------------------------------------------------------- */
.has-light-text .kg-audio-card button {
color: #fff;
}
.has-light-text .kg-audio-card .kg-audio-volume-slider {
color: rgb(255 255 255 / 0.3)
}
/* Caption
/* ---------------------------------------------------------- */
figcaption {
margin-top: 12px;
font-size: calc(1.4rem * var(--font-multiplier, 1));
text-align: center;
}
.kg-card.kg-width-full figcaption {
padding: 0 16px;
}
figcaption a {
color: var(--ghost-accent-color);
text-decoration: underline;
}