ponder.ooo
馃悕馃悕馃悕
1<script lang="ts">
2 export let message: Failure;
3</script>
4
5<div class=display-container>
6 <pre class=display>Failure: {message.explanation}</pre>
7</div>
8
9<style>
10 .display-container {
11 display: inline-block;
12 position: relative;
13 margin: 0;
14 padding: 0;
15 border: 0;
16 width: 100%;
17 height: 100%;
18 padding-bottom: 0.75em;
19 background-color: var(--code-editor-background);
20 line-height: 1.5;
21 }
22
23 .display {
24 position: relative;
25 padding: 0;
26 margin: 0;
27 top: 0.5em;
28 left: 0.5em;
29 width: calc(100% - 1em);
30 word-wrap: break-word;
31 overflow: auto;
32 white-space: pre-wrap;
33
34 color: var(--ficscript-failure);
35 font-weight: bold;
36 }
37
38 /* Identical to scrollbar styling of script_input.svelte. consider extracting to site.css */
39 ::-webkit-scrollbar {
40 width: 0.5em;
41 position: absolute;
42 right: 0.5em;
43 }
44
45 ::-webkit-scrollbar-track {
46 background: #344;
47 cursor: pointer !important;
48 }
49
50 ::-webkit-scrollbar-thumb {
51 background: #788;
52 cursor: pointer !important;
53 }
54
55 ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-thumb:hover {
56 cursor: pointer !important;
57 user-select: none;
58 }
59</style>