extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2024-12-14 02:20:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Made kalk_web colors inherited instead of set by prop

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
kalk_web/public/index.html
View File

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

10
kalk_web/src/KalkCalculator.svelte
View File

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