Add access controls window

svelte/src/layout/Button.svelte

@@ -8,13 +8,13 @@ export let disabled = false;
 export let icon = ""
 export let icon_small = false;
 export let label = ""
-export let title = ""
+export let title = null
 export let link_href = ""
 export let link_target = "_self"
 export let click = e => {}
-export let style = ""
-export let type = ""
-export let form = ""
+export let style = null
+export let type = null
+export let form = null
 
 let click_int = e => {
 	if (highlight_on_click) {
@@ -43,7 +43,7 @@ let click_int = e => {
 		style={style}
 		type={type}
 		form={form}
-		disabled={disabled ? "disabled":""}
+		disabled={disabled ? "disabled":null}
 	>
 		{#if icon !== ""}
 			<i class="icon" class:small={icon_small}>{icon}</i>
@@ -63,7 +63,7 @@ let click_int = e => {
 		class:flat
 		title={title}
 		style={style}
-		disabled={disabled ? "disabled":""}
+		disabled={disabled ? "disabled":null}
 	>
 		{#if icon !== ""}
 			<i class="icon" class:small={icon_small}>{icon}</i>

svelte/src/layout/IconBlock.svelte

@@ -38,6 +38,7 @@ export let width = "750px"
 	vertical-align: middle;
 	overflow-wrap: anywhere;
 	background-color: var(--shaded_background);
+	backdrop-filter: blur(4px);
 	border-radius: 8px;
 	padding: 8px;
 }

svelte/src/layout/TextBlock.svelte

@@ -16,6 +16,7 @@ export let center = false
 	margin: 8px auto;
 
 	background-color: var(--shaded_background);
+	backdrop-filter: blur(4px);
 	border-radius: 8px;
 	padding: 8px;
 }

svelte/src/layout/ToggleButton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+export let on = false
+export let group_first = false
+export let group_middle = false
+export let group_last = false
+</script>
+
+<button
+	on:click={() => on = !on}
+	type="button"
+	class="button"
+	class:button_highlight={on}
+	class:group_first
+	class:group_middle
+	class:group_last
+>
+	{#if on}
+		<i class="icon">check</i>
+	{:else}
+		<i class="icon">close</i>
+	{/if}
+
+	<slot></slot>
+</button>
+
+<style>
+.button {
+	flex: 0 0 content;
+}
+</style>