From f17d2fa71619b7b9cde37868c4e202c7ba809160 Mon Sep 17 00:00:00 2001 From: Blomblo <63555404+mrblomblo@users.noreply.github.com> Date: Sat, 13 Sep 2025 02:23:56 +0200 Subject: [PATCH 1/8] Dynamic theme preview loading, Iframe previews, and other improvements --- src/Pages/Install.cshtml | 83 +++------------ src/Pages/ThemePreview.cshtml | 34 ++++++ src/wwwroot/css/installer.css | 174 ++++--------------------------- src/wwwroot/css/themepreview.css | 26 +++++ 4 files changed, 95 insertions(+), 222 deletions(-) create mode 100644 src/Pages/ThemePreview.cshtml create mode 100644 src/wwwroot/css/themepreview.css diff --git a/src/Pages/Install.cshtml b/src/Pages/Install.cshtml index 16c53103d..54e3efe22 100644 --- a/src/Pages/Install.cshtml +++ b/src/Pages/Install.cshtml @@ -140,79 +140,20 @@ diff --git a/src/Pages/ThemePreview.cshtml b/src/Pages/ThemePreview.cshtml new file mode 100644 index 000000000..441985215 --- /dev/null +++ b/src/Pages/ThemePreview.cshtml @@ -0,0 +1,34 @@ +@page +@section Header { + + +} + + +
+
+

Core Parameters will go here

+
+ +
+ +
+
+ + + +
+
+
diff --git a/src/wwwroot/css/installer.css b/src/wwwroot/css/installer.css index b3b6887b3..6b0d25e8e 100644 --- a/src/wwwroot/css/installer.css +++ b/src/wwwroot/css/installer.css @@ -24,166 +24,38 @@ } .form-check { margin-bottom: 0.5rem; + cursor: pointer; } .theme_preview .form-check { display: inline-block; - width: 30%; - height: 10rem; + width: 49%; + height: 22rem; border: 1px solid var(--light-border); border-radius: 0.5rem; + padding-left: 0; + position: relative; } -.theme_preview .form-check .button_example { - display: block; - height: 2rem; - font-weight: bold; - border-radius: 0.5rem; - text-align: center; - width: fit-content; - padding-left: 0.2rem; - padding-right: 0.2rem; - margin-top: 2rem; - margin-left: auto; - margin-right: auto; - padding-top: 3px; -} -.theme_preview_modern_dark { - background-color: #202020; - color: #E4E4E4; -} -.theme_preview_modern_dark .button_example { - border: 1px solid #3f3f46; - background-color: #4b4b4b; - color: #ffffff; -} -.theme_preview_modern_light { - background-color: #D9D9D9; - color: #101010; -} -.theme_preview_modern_light .button_example { - border: 1px solid #3f3f46; - background-color: #a1a1a1; - color: #101010; -} -.theme_preview_dark_dreams { - background-color: #18181b; - color: #eeeeee; -} -.theme_preview_dark_dreams .button_example { - border: 1px solid #3f3f46; - background-color: #7855e1; - color: #ffffff; -} -.theme_preview_cyber_swarm { - background-color: #18181b; - color: #eeeeee; -} -.theme_preview_cyber_swarm .button_example { - border: 1px solid #3f3f46; - background-color: #00bc8c; - color: #ffffff; - border-radius: 1rem; - padding-top: 0.1em; - padding-left: 0.3em; - padding-right: 0.3em; -} -.theme_preview_gravity_blue { - background-color: #0b0f20; - color: #eeeeee; -} -.theme_preview_gravity_blue .button_example { - border: 1px solid #3f3f46; - background-color: orange; - color: #101010; -} -.theme_preview_eyesear_white { - background-color: #f0f0f0; - color: #101010; -} -.theme_preview_eyesear_white .button_example { - border: 1px solid #3f3f46; - background-color: #a1a1a1; - color: #101010; -} -.theme_preview_punked { - background-color: #0a0a0a; - color: #eeeeee; -} -.theme_preview_punked .button_example { - border: 1px solid #00fff7; - background-color: #0a0a0a; - color: #ffffff; - border-radius: 1rem; - padding-top: 0.1em; - padding-left: 0.3em; - padding-right: 0.3em; -} -.theme_preview_solarized { - background-color: #d3cdc0; - color: #101010; -} -.theme_preview_solarized .button_example { - border: 1px solid #3f3f46; - background-color: #a1a1a1; - color: #101010; -} -.theme_preview_swarmpunk { - background-color: #0a0a1f; - color: #00ff9d; -} -.theme_preview_swarmpunk .button_example { - border: 1px solid #00ff9d40; - background-color: #12122a; - color: #00ff9d; -} -.theme_preview_beweish { - background-color: #0e0e2c; - color: #ffffff; -} -.theme_preview_beweish .button_example { - border: 1px solid #2a4170; - background-color: #0f3460; - color: #ffffff; -} -.theme_preview_ctp_mocha { - background-color: #11111b; - color: #cdd6f4; -} -.theme_preview_ctp_mocha .button_example { - border: 1px solid #313244; - background-color: #585b70; - color: #cdd6f4; -} -.theme_preview_ctp_macchiato { - background-color: #181926; - color: #cad3f5; -} -.theme_preview_ctp_macchiato .button_example { - border: 1px solid #363a4f; - background-color: #5b6078; - color: #cad3f5; -} -.theme_preview_ctp_frappe { - background-color: #232634; - color: #c6d0f5; -} -.theme_preview_ctp_frappe .button_example { - border: 1px solid #414559; - background-color: #626880; - color: #c6d0f5; -} -.theme_preview_ctp_latte { - background-color: #dce0e8; - color: #4c4f69; -} -.theme_preview_ctp_latte .button_example { - border: 1px solid #ccd0da; - background-color: #acb0be; - color: #4c4f69; +.theme_preview .form-check:has(.form-check-input:checked) { + border: 1px solid var(--emphasis); +} +.form-check .form-check-input { + margin-left: 0.5rem; + margin-top: 0.5rem; +} +.form-check .form-check-iframe { + width: 100%; + height: calc(100% - 2rem); + border-bottom-left-radius: calc(0.5rem - 1px); + border-bottom-right-radius: calc(0.5rem - 1px); + position: absolute; + bottom: 0; + left: 0; } label { + margin-top: 0.125rem; + margin-left: 0.5rem; + cursor: pointer; font-size: 120%; - vertical-align: top; - margin-top: -0.3rem; } .final_confirm_info { font-weight: bold; diff --git a/src/wwwroot/css/themepreview.css b/src/wwwroot/css/themepreview.css new file mode 100644 index 000000000..aeb2a5e5e --- /dev/null +++ b/src/wwwroot/css/themepreview.css @@ -0,0 +1,26 @@ +html, body { + height: 100% +} +#alt_generate_button { + margin-left: 0 !important; +} +.version-display { + display: none; + visibility: hidden; +} +.theme_preview-content { + height: 100%; + align-content: center; + margin-top: -0.25rem; +} +.theme_preview-item { + display: flex; + justify-content: center; +} +.theme_preview-item:not(:last-child) { + margin-bottom: 0.5em; +} +.theme_preview-item .theme_preview-text { + font-size: 1.25rem; + margin-bottom: 0; +} From 3614d74c86cdbd4b7908a3e578f1a2e2985cea43 Mon Sep 17 00:00:00 2001 From: Blomblo <63555404+mrblomblo@users.noreply.github.com> Date: Sat, 13 Sep 2025 02:38:15 +0200 Subject: [PATCH 2/8] oops --- src/Pages/Install.cshtml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/Install.cshtml b/src/Pages/Install.cshtml index 54e3efe22..533ab7b1e 100644 --- a/src/Pages/Install.cshtml +++ b/src/Pages/Install.cshtml @@ -150,7 +150,7 @@ string themeIdNoUnderscore = $"{theme.ID.Replace("_", "")}";
- +
} From e37f176b3e0da77e49a5758bf87ca1f4ce84b268 Mon Sep 17 00:00:00 2001 From: Blomblo <63555404+mrblomblo@users.noreply.github.com> Date: Sat, 13 Sep 2025 14:17:11 +0200 Subject: [PATCH 3/8] Fixes - Remove notice in install hint - Remove lazy-loading of iframes - Load CSS in iframe with C# instead of JS --- src/Pages/Install.cshtml | 4 ++-- src/Pages/ThemePreview.cshtml | 21 +++++++-------------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/src/Pages/Install.cshtml b/src/Pages/Install.cshtml index 533ab7b1e..94fc00517 100644 --- a/src/Pages/Install.cshtml +++ b/src/Pages/Install.cshtml @@ -140,7 +140,7 @@