@schukai/monster/source/components/form/stylesheet/dropzone.mjs

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

/**
 * Copyright © Volker Schukai and all contributing authors, 2026. 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 Volker Schukai.
 */

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

export { DropzoneStyleSheet };

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

try {
	DropzoneStyleSheet.insertRule(
		`
@layer dropzone { 
@layer dropzone{:host{box-sizing:border-box;display:block}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=dropzone]{align-items:center;background-color:var(--monster-bg-color-primary-1);border:1px dashed var(--monster-color-border-2);border-radius:var(--monster-border-radius);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;flex-direction:column;gap:.8rem;justify-content:center;padding:1.5rem;text-align:center;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}[data-monster-role=dropzone].is-dragover{background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-4);box-shadow:var(--monster-box-shadow-2);color:var(--monster-color-primary-2)}[data-monster-role=dropzone][data-monster-disabled]{cursor:not-allowed;opacity:.6}[data-monster-role=dropzone]:focus-visible{outline:1px dashed var(--monster-color-selection-3);outline-offset:4px}[data-monster-role=title]{font-weight:700}[data-monster-role=hint]{color:var(--monster-color-secondary-2);font-size:.9rem}[data-monster-role=status]{font-size:.9rem;margin-top:.4rem}[data-monster-role=dropzone] monster-button{width:-moz-max-content;width:max-content}[data-monster-role=input]{display:none}[data-monster-role=list]{display:flex;flex-direction:column;gap:.6rem;list-style:none;margin:.8rem 0 0;padding:0}[data-monster-role=item]{align-items:center;border:1px solid var(--monster-color-border-2);border-radius:var(--monster-border-radius);display:grid;gap:.4rem;grid-template-columns:auto 1fr 120px 40px 28px 28px;padding:.6rem .8rem;transition:opacity .25s ease,transform .25s ease}[data-monster-role=preview]{align-items:center;background-color:var(--monster-bg-color-primary-2);border-radius:calc(var(--monster-border-radius)/1.5);color:var(--monster-color-primary-2);display:flex;height:40px;justify-content:center;overflow:hidden;width:40px}[data-monster-role=preview-image]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}[data-monster-role=preview-icon]{color:var(--monster-color-primary-1);font-size:.7rem;font-weight:700;text-transform:uppercase}[data-monster-role=meta]{display:flex;flex-direction:column;gap:.15rem;min-width:0}[data-monster-role=name]{font-weight:600}[data-monster-role=info],[data-monster-role=name]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-monster-role=info]{color:var(--monster-color-secondary-2);font-size:.8rem}[data-monster-role=progress]{background-color:var(--monster-bg-color-primary-2);border-radius:999px;color:var(--monster-color-primary-2);height:6px;overflow:hidden;position:relative}[data-monster-role=bar]{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);height:100%;width:0}[data-monster-role=percent]{font-size:.8rem;padding-left:.2rem;text-align:right}[data-monster-role=remove],[data-monster-role=retry],[data-monster-role=state-icon]{align-items:center;display:flex;justify-content:center}[data-monster-role=remove],[data-monster-role=retry]{background-color:transparent;border:0;color:var(--monster-color-primary-1);cursor:pointer;height:28px;padding:0;width:28px}[data-monster-role=retry]{display:none}[data-monster-role=item][data-monster-state=error]
		[data-monster-role=retry]{display:flex}[data-monster-role=item][data-monster-state=error]
		[data-monster-role=state-icon]{color:var(--monster-color-error-1)}[data-monster-role=item][data-monster-state=success]
		[data-monster-role=state-icon]{color:var(--monster-color-success-1)}[data-monster-role=item][data-monster-state=success]{border-color:var(--monster-bg-color-success-1)}[data-monster-role=item][data-monster-state=error]{border-color:var(--monster-bg-color-error-1)}[data-monster-role=item].is-disappearing{opacity:0;transform:translateY(6px)}} 
}`,
		0,
	);
} catch (e) {
	addAttributeToken(
		document.getRootNode().querySelector("html"),
		ATTRIBUTE_ERRORMESSAGE,
		e + "",
	);
}