Skip to content
Snippets Groups Projects
Select Git revision
  • 61ae58a5fc3bca1d634941150869c106e219a430
  • master default protected
  • 1.31
  • 4.38.6
  • 4.38.5
  • 4.38.4
  • 4.38.3
  • 4.38.2
  • 4.38.1
  • 4.38.0
  • 4.37.2
  • 4.37.1
  • 4.37.0
  • 4.36.0
  • 4.35.0
  • 4.34.1
  • 4.34.0
  • 4.33.1
  • 4.33.0
  • 4.32.2
  • 4.32.1
  • 4.32.0
  • 4.31.0
23 results

skeleton.mjs

Blame
  • Volker Schukai's avatar
    61ae58a5
    History
    skeleton.mjs 5.13 KiB
    /**
     * 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 { SkeletonStyleSheet };
    
    /**
     * @private
     * @type {CSSStyleSheet}
     */
    const SkeletonStyleSheet = new CSSStyleSheet();
    
    try {
    	SkeletonStyleSheet.insertRule(
    		`
    @layer skeleton { 
    .monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation-duration:2.25s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;border-radius:4px}@keyframes shimmer{0%{filter:brightness(1)}50%{filter:brightness(1.5)}to{filter:brightness(1)}} 
    }`,
    		0,
    	);
    } catch (e) {
    	addAttributeToken(
    		document.getRootNode().querySelector("html"),
    		ATTRIBUTE_ERRORMESSAGE,
    		e + "",
    	);
    }