mirror of
https://github.com/ankitects/anki.git
synced 2025-09-24 08:46:37 -04:00
Inline some bootstrap-dark styling
This commit is contained in:
parent
400254277b
commit
412091ae60
4 changed files with 29 additions and 13 deletions
|
@ -70,6 +70,7 @@ ts_library(
|
|||
"//ts/lib",
|
||||
"//ts/lib:backend_proto",
|
||||
"//ts/sveltelib",
|
||||
"//ts/components",
|
||||
"@npm//lodash-es",
|
||||
"@npm//svelte",
|
||||
],
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
9
ts/sass/bootstrap-dark.scss
vendored
9
ts/sass/bootstrap-dark.scss
vendored
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue