override some bootstrap styles for night mode
There's probably a better way to accomplish this - fixes welcome! Also fix the page reloading when enter hit inside the modal.
This commit is contained in:
parent
f6a59ebdfa
commit
e5c5c91ec8
@ -16,9 +16,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||||||
evt.getModifierState(primaryModifierForPlatform())
|
evt.getModifierState(primaryModifierForPlatform())
|
||||||
) {
|
) {
|
||||||
state.save(false);
|
state.save(false);
|
||||||
} else {
|
|
||||||
console.log(evt.getModifierState(primaryModifierForPlatform()));
|
|
||||||
console.log(primaryModifierForPlatform());
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
@ -31,13 +31,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||||||
modal.hide();
|
modal.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onKeyUp(evt: KeyboardEvent): void {
|
|
||||||
if (evt.code === "Enter") {
|
|
||||||
evt.stopPropagation();
|
|
||||||
onOkClicked();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const container = document.getElementById("modal")!;
|
const container = document.getElementById("modal")!;
|
||||||
container.addEventListener("shown.bs.modal", onShown);
|
container.addEventListener("shown.bs.modal", onShown);
|
||||||
@ -54,7 +47,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<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" on:keyup={onKeyUp}>
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title" id="modalLabel">{title}</h5>
|
<h5 class="modal-title" id="modalLabel">{title}</h5>
|
||||||
@ -65,7 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|||||||
aria-label="Close" />
|
aria-label="Close" />
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<form>
|
<form on:submit|preventDefault={onOkClicked}>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<label
|
<label
|
||||||
for="prompt-input"
|
for="prompt-input"
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
@use "ts/sass/scrollbar";
|
@use "ts/sass/scrollbar";
|
||||||
|
@use "ts/sass/bootstrap-dark";
|
||||||
|
|
||||||
@import "ts/sass/base";
|
@import "ts/sass/base";
|
||||||
@import "ts/sass/bootstrap/dropdown";
|
@import "ts/sass/bootstrap/dropdown";
|
||||||
@ -12,6 +13,7 @@
|
|||||||
|
|
||||||
.night-mode {
|
.night-mode {
|
||||||
@include scrollbar.night-mode;
|
@include scrollbar.night-mode;
|
||||||
|
@include bootstrap-dark.night-mode;
|
||||||
}
|
}
|
||||||
|
|
||||||
// the unprefixed version wasn't added until Chrome 81
|
// the unprefixed version wasn't added until Chrome 81
|
||||||
|
@ -5,6 +5,7 @@ sass_library(
|
|||||||
srcs = [
|
srcs = [
|
||||||
"_vars.scss",
|
"_vars.scss",
|
||||||
"base.scss",
|
"base.scss",
|
||||||
|
"bootstrap-dark.scss",
|
||||||
],
|
],
|
||||||
visibility = ["//visibility:public"],
|
visibility = ["//visibility:public"],
|
||||||
deps = ["//ts/sass/bootstrap"],
|
deps = ["//ts/sass/bootstrap"],
|
||||||
|
39
ts/sass/bootstrap-dark.scss
vendored
Normal file
39
ts/sass/bootstrap-dark.scss
vendored
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
/* Copyright: Ankitects Pty Ltd and contributors
|
||||||
|
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
|
||||||
|
|
||||||
|
@use 'vars';
|
||||||
|
@use 'fusion_vars';
|
||||||
|
|
||||||
|
@mixin night-mode {
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
background-color: var(--frame-bg);
|
||||||
|
border-color: var(--border);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--window-bg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
background-color: var(--frame-bg);
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
color: var(--text-fg);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
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 New Issue
Block a user