mirror of
https://github.com/ankitects/anki.git
synced 2025-09-25 01:06:35 -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",
|
||||||
"//ts/lib:backend_proto",
|
"//ts/lib:backend_proto",
|
||||||
"//ts/sveltelib",
|
"//ts/sveltelib",
|
||||||
|
"//ts/components",
|
||||||
"@npm//lodash-es",
|
"@npm//lodash-es",
|
||||||
"@npm//svelte",
|
"@npm//svelte",
|
||||||
],
|
],
|
||||||
|
|
|
@ -6,7 +6,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
/* eslint
|
/* eslint
|
||||||
@typescript-eslint/no-non-null-assertion: "off",
|
@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";
|
import Modal from "bootstrap/js/dist/modal";
|
||||||
|
|
||||||
export let title: string;
|
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("shown.bs.modal", onShown);
|
||||||
container.removeEventListener("hidden.bs.modal", onHidden);
|
container.removeEventListener("hidden.bs.modal", onHidden);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const nightMode = getContext<boolean>(nightModeKey);
|
||||||
</script>
|
</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 fade" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content" class:default-colors={nightMode}>
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title" id="modalLabel">{title}</h5>
|
<h5 class="modal-title" id="modalLabel">{title}</h5>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn-close"
|
class="btn-close"
|
||||||
|
class:invert={nightMode}
|
||||||
data-bs-dismiss="modal"
|
data-bs-dismiss="modal"
|
||||||
aria-label="Close" />
|
aria-label="Close" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,17 +7,26 @@
|
||||||
|
|
||||||
import TextInputModal from "./TextInputModal.svelte";
|
import TextInputModal from "./TextInputModal.svelte";
|
||||||
|
|
||||||
|
import { checkNightMode } from "lib/nightmode";
|
||||||
|
import { nightModeKey } from "components/contextKeys";
|
||||||
|
|
||||||
export interface TextInputModalProps {
|
export interface TextInputModalProps {
|
||||||
title: string;
|
title: string;
|
||||||
prompt: string;
|
prompt: string;
|
||||||
startingValue?: string;
|
startingValue?: string;
|
||||||
onOk: (string) => void;
|
onOk: (text: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function textInputModal(props: TextInputModalProps): TextInputModal {
|
export function textInputModal(props: TextInputModalProps): TextInputModal {
|
||||||
const target = document.getElementById("modal")!;
|
const target = document.getElementById("modal")!;
|
||||||
|
|
||||||
|
const nightMode = checkNightMode();
|
||||||
|
const context = new Map();
|
||||||
|
context.set(nightModeKey, nightMode);
|
||||||
|
|
||||||
return new TextInputModal({
|
return new TextInputModal({
|
||||||
target,
|
target,
|
||||||
props,
|
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);
|
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