ドロップゾーンの見栄えを良くする

Philipp Hartenfellerさんが彼のブログで、Oracle APEX 20.2で新しく追加されたコンポーネントである、ドロップゾーン（ファイルをドラッグ＆ドロップで選択させるページ・アイテム - ファイル参照）の見栄えを良くするCSSを公開していました。彼の記事APEX 20.2: improve Dropzone UX with CSSはこちらです。

試しにCSSを設定した結果はこちらです。

元々はこんな感じです。

CSSを設定する場所はページ・プロパティのインラインCSSです。

設定するCSSについては、Philipp HartenfellerさんのGitHubを参照してください。

	.apex-item-filedrop {
	border: 3px dashed #ccd0d4;
	background: #f7f7f7;
	border-radius: 4px;
	box-shadow: inset 0px 2px 6px 0px #d2d2d291;
	transition: border-color 300ms cubic-bezier(0, 0, 0.2, 1);
	}
	.apex-item-filedrop.is-dragging {
	border-color: #0076df;
	}

view raw apex-dropzone-ux.css hosted with ❤ by GitHub

完