Inline some bootstrap-dark styling

This commit is contained in:
Henrik Giesel 2021-05-25 15:30:43 +02:00 committed by Damien Elmes
parent 400254277b
commit 412091ae60
4 changed files with 29 additions and 13 deletions

View file

@ -70,6 +70,7 @@ ts_library(
"//ts/lib",
"//ts/lib:backend_proto",
"//ts/sveltelib",
"//ts/components",
"@npm//lodash-es",
"@npm//svelte",
],

View file

@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* eslint
@typescript-eslint/no-non-null-assertion: "off",
*/
import { onMount, onDestroy } from "svelte";
import { onMount, onDestroy, getContext } from "svelte";
import { nightModeKey } from "components/contextKeys";
import Modal from "bootstrap/js/dist/modal";
export let title: string;
@ -44,16 +45,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
container.removeEventListener("shown.bs.modal", onShown);
container.removeEventListener("hidden.bs.modal", onHidden);
});
const nightMode = getContext<boolean>(nightModeKey);
</script>
<style lang="scss">
.default-colors {
background-color: var(--window-bg);
color: var(--text-fg);
}
.invert {
filter: invert(1) grayscale(100%) brightness(200%);
}
</style>
<div class="modal fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-content" class:default-colors={nightMode}>
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">{title}</h5>
<button
type="button"
class="btn-close"
class:invert={nightMode}
data-bs-dismiss="modal"
aria-label="Close" />
</div>

View file

@ -7,17 +7,26 @@
import TextInputModal from "./TextInputModal.svelte";
import { checkNightMode } from "lib/nightmode";
import { nightModeKey } from "components/contextKeys";
export interface TextInputModalProps {
title: string;
prompt: string;
startingValue?: string;
onOk: (string) => void;
onOk: (text: string) => void;
}
export function textInputModal(props: TextInputModalProps): TextInputModal {
const target = document.getElementById("modal")!;
const nightMode = checkNightMode();
const context = new Map();
context.set(nightModeKey, nightMode);
return new TextInputModal({
target,
props,
});
context,
} as any);
}

View file

@ -14,13 +14,4 @@
background-color: var(--window-bg);
}
}
.modal-content {
background-color: var(--window-bg);
color: var(--text-fg);
}
.btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
}