diff --git a/php/public/apply-theme.js b/php/public/apply-theme.js
new file mode 100644
index 00000000..91783b16
--- /dev/null
+++ b/php/public/apply-theme.js
@@ -0,0 +1,14 @@
+"use strict";
+
+// Apply the saved theme immediately to avoid a flash of the wrong theme.
+try { document.documentElement.setAttribute('data-theme', localStorage.getItem('theme') ?? ''); } catch (e) {}
+
+// React when the user toggles the theme on the parent page while this page is
+// open in an iframe. localStorage.setItem() fires a 'storage' event on every
+// other window / frame that shares the same origin, so we can keep in sync
+// without the parent having to know about us.
+window.addEventListener('storage', (e) => {
+ if (e.key === 'theme') {
+ document.documentElement.setAttribute('data-theme', e.newValue ?? '');
+ }
+});
diff --git a/php/public/logs.css b/php/public/logs.css
index 04f6be1a..3efcf40d 100644
--- a/php/public/logs.css
+++ b/php/public/logs.css
@@ -10,6 +10,7 @@ pre {
margin: 0;
padding: 1rem;
box-sizing: border-box;
+ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
#floating-box {
position: fixed;
@@ -26,7 +27,8 @@ pre {
gap: 0.5rem;
font-size: large;
border: solid thin gray;
- background-color: #f9f9f9;
+ background-color: var(--color-main-background);
+ color: var(--color-main-text);
width: 10rem;
padding: 0.5rem 1rem;
margin: 0 0 0 1rem;
diff --git a/php/public/style.css b/php/public/style.css
index 9a8d17d7..40f4ec76 100644
--- a/php/public/style.css
+++ b/php/public/style.css
@@ -483,8 +483,8 @@ input[type="checkbox"]:disabled:not(:checked) + label {
visibility: hidden;
opacity: 0;
align-self: start;
- width: 300px;
- height: 200px;
+ width: min(700px, calc(100vw - 4rem));
+ height: min(400px, calc(100vh - 14rem));
border-radius: var(--border-radius-large);
border: solid thin rgb(192, 192, 192);
}
diff --git a/php/public/toggle-dark-mode.js b/php/public/toggle-dark-mode.js
index 44eff9ff..60d9f489 100644
--- a/php/public/toggle-dark-mode.js
+++ b/php/public/toggle-dark-mode.js
@@ -11,7 +11,7 @@ function toggleTheme() {
function setThemeToDOM(value) {
// Set the theme to the root document and all possible iframe documents (so they can adapt their styling, too).
- const documents = [document, Array.from(document.querySelectorAll('iframe')).map((iframe) => iframe.contentDocument)].flat()
+ const documents = [document, ...Array.from(document.querySelectorAll('iframe')).map((iframe) => iframe.contentDocument).filter(Boolean)]
documents.forEach((doc) => doc.documentElement.setAttribute('data-theme', value));
}
@@ -35,4 +35,6 @@ setThemeToDOM(getSavedTheme());
document.addEventListener('DOMContentLoaded', () => {
setThemeIcon(getSavedTheme())
document.querySelector('button#theme-toggle')?.addEventListener('click', () => toggleTheme());
+ // Re-apply theme when the overlay-log iframe navigates (e.g. after a form submission).
+ document.querySelector('iframe#overlay-log')?.addEventListener('load', () => setThemeToDOM(getSavedTheme()));
});
diff --git a/php/src/Controller/DockerController.php b/php/src/Controller/DockerController.php
index 2de0a94f..a75a266c 100644
--- a/php/src/Controller/DockerController.php
+++ b/php/src/Controller/DockerController.php
@@ -401,7 +401,8 @@ readonly class DockerController {
-
+
+
diff --git a/php/templates/layout.twig b/php/templates/layout.twig
index 15ec70f6..7450fdd1 100644
--- a/php/templates/layout.twig
+++ b/php/templates/layout.twig
@@ -2,10 +2,10 @@
AIO
-
+
-
+
diff --git a/php/templates/log.twig b/php/templates/log.twig
index afcb0828..8dc849a4 100644
--- a/php/templates/log.twig
+++ b/php/templates/log.twig
@@ -2,9 +2,10 @@
AIO
-
-
+
+
+