mirror of
https://github.com/smartyellow/status.git
synced 2025-01-18 05:27:58 +00:00
CSS tweaks & modal escape
This commit is contained in:
parent
bd9444f30f
commit
9c8b939fc0
@ -3,8 +3,8 @@ html, body {
|
|||||||
--body-fg: #fff;
|
--body-fg: #fff;
|
||||||
--tile-bg: #181818;
|
--tile-bg: #181818;
|
||||||
--grey: grey;
|
--grey: grey;
|
||||||
--red: red;
|
--red: #f00;
|
||||||
--green: green;
|
--green: #1d641d;
|
||||||
--dark: #0a0a0a;
|
--dark: #0a0a0a;
|
||||||
--radius: 10px;
|
--radius: 10px;
|
||||||
--cols: 4;
|
--cols: 4;
|
||||||
@ -17,10 +17,11 @@ html, body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.theme-light {
|
.theme-light {
|
||||||
--body-bg: #fff;
|
--body-bg: #d6d6d6;
|
||||||
--body-fg: #000;
|
--body-fg: #000;
|
||||||
--tile-bg: #dedede;
|
--tile-bg: #dedede;
|
||||||
--dark: #c2c2c2;
|
--dark: #c2c2c2;
|
||||||
|
--green: #377137;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb {
|
.mb {
|
||||||
|
@ -4,24 +4,21 @@
|
|||||||
export let title = '';
|
export let title = '';
|
||||||
export let open = false;
|
export let open = false;
|
||||||
|
|
||||||
function close() {
|
function keydown(event) {
|
||||||
open = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function keyup(event) {
|
|
||||||
if (event.key === 'Escape') {
|
if (event.key === 'Escape') {
|
||||||
close();
|
event.preventDefault();
|
||||||
|
open = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:window on:keyup={keyup} />
|
<svelte:window on:keydown={keydown} />
|
||||||
|
|
||||||
<div class="modal-bg theme-{$settings.theme}" class:open>
|
<div class="modal-bg theme-{$settings.theme}" class:open>
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">{title}</div>
|
<div class="title">{title}</div>
|
||||||
<button class="close" on:click={close}>×</button>
|
<button class="close" on:click={() => open = false}>×</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="body">
|
<div class="body">
|
||||||
@ -38,7 +35,6 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
padding-top: 3rem;
|
padding-top: 3rem;
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -7,11 +7,10 @@
|
|||||||
export let value;
|
export let value;
|
||||||
export let date;
|
export let date;
|
||||||
export let since;
|
export let since;
|
||||||
export let weight = 600;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Tile {title} {subtitle} {color} {date} {since}>
|
<Tile {title} {subtitle} {color} {date} {since}>
|
||||||
<div class="value {color}" style:font-weight={weight}>
|
<div class="value {color}">
|
||||||
{value}
|
{value}
|
||||||
</div>
|
</div>
|
||||||
</Tile>
|
</Tile>
|
||||||
|
Loading…
Reference in New Issue
Block a user