Made kalk_web colors inherited instead of set by prop

This commit is contained in:
PaddiM8 2021-01-04 19:37:18 +01:00
parent bdf10a15f7
commit dd3ddced66
2 changed files with 11 additions and 10 deletions

View File

@ -17,22 +17,23 @@
}
.calculator {
width: 600px;
height: 200px;
width: 850px;
height: 350px;
color: white;
font-family: "Hack", monospace, Consolas;
font-size: 14px;
padding: 5px 10px 0 10px;
background-color: #424242;
background-color: #2e2e2e;
border-radius: 7px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
}
</style>
</head>
<body>
<noscript>Please enable JavaScript to view this application.</noscript>
<section id="wrapper">
<div class="calculator">
<kalk-calculator />
<kalk-calculator backgroundColor="#2e2e2e" />
</div>
</section>
</body>

View File

@ -7,8 +7,6 @@
export let errorColor = "tomato";
export let hintColor = "#9c9c9c";
export let linkColor = "cornflowerblue";
export let backgroundColor = "#424242";
export let textColor = "white";
let outputLines: [value: string, byUser: boolean][] = [];
let outputElement: HTMLElement;
@ -221,6 +219,8 @@
width: 100%;
height: 100%;
box-sizing: border-box;
background-color: inherit;
color: inherit;
}
.output {
@ -275,8 +275,8 @@
</style>
<svelte:options tag="kalk-calculator" />
<div class="calculator" style="background-color: {backgroundColor}">
<div class="output" style="color: {textColor}" bind:this={outputElement}>
<div class="calculator">
<div class="output" bind:this={outputElement}>
<p class="consoleLine">kalk</p>
<p class="consoleLine">
<span style="color: {hintColor}">Type 'help' for instructions.</span>
@ -293,7 +293,7 @@
<div class="input-area">
<span class="prompt" style="color: {promptColor}">&gt;&gt;&nbsp;</span>
{#await import('@paddim8/kalk')}
<span style="color: {textColor}">Loading...</span>
<span>Loading...</span>
{:then kalk}
<div
contenteditable="true"