{#if $bundle?.error} <ErrorOverlay error={$bundle.error} /> {/if} </div> <div slot="panel-header"> <button on:click|stopPropagation={clear_logs}> {#if logs.length > 0} ({logs.length}) {/if} Clear </button> </div> <section slot="panel-body"> <Console {logs} {theme} on:clear={clear_logs} /> </section> </PaneWithPanel> <div class="overlay"> {#if error} <Message kind="error" details={error} /> {:else if status || !$bundle} <Message kind="info" truncate>{status || 'loading Svelte compiler...'}</Message> {/if} </div> </div> <style> .iframe-container { position: absolute; background-color: var(--sk-back-1, white); border: none; width: 100%; height: 100%; } iframe { width: 100%; height: 100%; border: none; display: block; } .greyed-out { filter: grayscale(50%) blur(1px); opacity: 0.25; } button { color: var(--sk-text-2, #999); font-size: 12px; text-transform: uppercase; display: block; } button:hover { color: var(--sk-text-1, #333); } .overlay { position: absolute; top: 0; width: 100%; } </style>