@schukai/monster/source/components/stylesheet/card.mjs

Monster is a simple library for creating fast, robust and lightweight websites.

/**
 * Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
 * Node module: @schukai/monster
 *
 * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
 * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
 *
 * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
 * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
 * For more information about purchasing a commercial license, please contact schukai GmbH.
 */

import { addAttributeToken } from "../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";

export { CardStyleSheet };

/**
 * @private
 * @type {CSSStyleSheet}
 */
const CardStyleSheet = new CSSStyleSheet();

try {
	CardStyleSheet.insertRule(
		`
@layer card { 
.cards{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:22px}.cards .card{align-content:stretch;align-items:stretch;background-color:var(--monster-bg-color-primary-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;border-shadow:var(--monster-box-shadow-1);overflow:hidden}:is(.cards .card) img{display:block;margin-left:0;-o-object-fit:scale-down;object-fit:scale-down;overflow:hidden;padding:0;width:101%}:is(:is(.cards .card) img):hover{box-shadow:var(--monster-box-shadow-2);transform:scale(1.05);transition:background .8s,color .25s .0833333333s}:is(.cards .card) h1,:is(.cards .card) h2,:is(.cards .card) h3,:is(.cards .card) h4,:is(.cards .card) h5,:is(.cards .card) h6,:is(.cards .card) p{margin:0;padding-left:1rem;padding-right:1rem}:is(.cards .card) h1:last-child,:is(.cards .card) h2:last-child,:is(.cards .card) h3:last-child,:is(.cards .card) h4:last-child,:is(.cards .card) h5:last-child,:is(.cards .card) h6:last-child,:is(.cards .card) p:last-child{padding-bottom:1rem}:is(.cards .card) h1:first-child,:is(.cards .card) h2:first-child,:is(.cards .card) h3:first-child,:is(.cards .card) h4:first-child,:is(.cards .card) h5:first-child,:is(.cards .card) h6:first-child,:is(.cards .card) p:first-child{padding-top:1rem}:is(.cards .card) img+h1,:is(.cards .card) img+h2,:is(.cards .card) img+h3,:is(.cards .card) img+h4,:is(.cards .card) img+h5,:is(.cards .card) img+h6,:is(.cards .card) img+p{padding-top:1rem}:is(.cards .card) h1+img,:is(.cards .card) h2+img,:is(.cards .card) h3+img,:is(.cards .card) h4+img,:is(.cards .card) h5+img,:is(.cards .card) h6+img,:is(.cards .card) p+img{padding-bottom:1rem}:is(.cards .card) h1+p,:is(.cards .card) h2+p,:is(.cards .card) h3+p,:is(.cards .card) h4+p,:is(.cards .card) h5+p,:is(.cards .card) h6+p,:is(.cards .card) p+p{padding-top:1rem}:is(.cards .card) .button+h1,:is(.cards .card) .button+h2,:is(.cards .card) .button+h3,:is(.cards .card) .button+h4,:is(.cards .card) .button+h5,:is(.cards .card) .button+h6,:is(.cards .card) .button+p,:is(.cards .card) button+h1,:is(.cards .card) button+h2,:is(.cards .card) button+h3,:is(.cards .card) button+h4,:is(.cards .card) button+h5,:is(.cards .card) button+h6,:is(.cards .card) button+p{padding-bottom:1rem}:is(.cards .card) h1+.button,:is(.cards .card) h1+button,:is(.cards .card) h2+.button,:is(.cards .card) h2+button,:is(.cards .card) h3+.button,:is(.cards .card) h3+button,:is(.cards .card) h4+.button,:is(.cards .card) h4+button,:is(.cards .card) h5+.button,:is(.cards .card) h5+button,:is(.cards .card) h6+.button,:is(.cards .card) h6+button,:is(.cards .card) p+.button,:is(.cards .card) p+button{margin-top:1rem}:is(.cards .card) .button,:is(.cards .card) button{border-left:none;border-right:none}:is(.cards .card) .button:first-child,:is(.cards .card) button:first-child{border-top:none}:is(.cards .card) .button:last-child,:is(.cards .card) button:last-child{border-bottom:none}:is(:is(.cards .card) button:last-child,:is(.cards .card) .button:last-child):hover{box-shadow:var(--monster-box-shadow-2);transform:scale(1.05);transition:background .8s,color .25s .0833333333s}.card:is(.cards .card):hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s;z-index:var(--monster-z-index-outline)} 
}`,
		0,
	);
} catch (e) {
	addAttributeToken(
		document.getRootNode().querySelector("html"),
		ATTRIBUTE_ERRORMESSAGE,
		e + "",
	);
}