Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 12 additions & 71 deletions src/Pages/Install.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -140,79 +140,20 @@

<div id="installer_section_themes" style="display: none;">
<div class="install_q_head">Choose a theme:</div>
<div class="install_hint">You can always change this later in the User Settings page.</div>
<div class="install_hint">You can always change this later in the User Settings page. The theme previews may take some time to load.</div>
<br>
<fieldset class="form-group theme_preview" id="theme_selection_field">
<div class="form-check theme_preview_modern_dark" id="theme_input_modern_dark">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_moderndark" value="modern_dark" checked="">
<label class="form-check-label" for="theme_moderndark">Modern Dark</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_modern_light" id="theme_input_modern_light">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_modernlight" value="modern_light">
<label class="form-check-label" for="theme_modernlight">Modern Light</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_solarized" id="theme_input_solarized">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_solarized" value="solarized">
<label class="form-check-label" for="theme_solarized">Solarized Light</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_dark_dreams" id="theme_input_dark_dreams">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_darkdreams" value="dark_dreams">
<label class="form-check-label" for="theme_darkdreams">Dark Dreams</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_gravity_blue" id="theme_input_gravity_blue">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_gravityblue" value="gravity_blue">
<label class="form-check-label" for="theme_gravityblue">Gravity Blue</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_cyber_swarm" id="theme_input_cyber_swarm">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_cyberswarm" value="cyber_swarm">
<label class="form-check-label" for="theme_cyberswarm">Cyber Swarm</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_punked" id="theme_input_punked">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_punked" value="punked">
<label class="form-check-label" for="theme_punked">Punked</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_eyesear_white" id="theme_input_eyesear_white">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_eyesearwhite" value="eyesear_white">
<label class="form-check-label" for="theme_eyesearwhite">Eyesear White</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_swarmpunk" id="theme_input_swarmpunk">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_swarmpunk" value="swarmpunk">
<label class="form-check-label" for="theme_swarmpunk">Swarm Punk</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_beweish" id="theme_input_beweish">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_beweish" value="beweish">
<label class="form-check-label" for="theme_beweish">Beweish</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_ctp_mocha" id="theme_input_ctp_mocha">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpmocha" value="ctp_mocha">
<label class="form-check-label" for="theme_ctpmocha">Catppuccin Mocha</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_ctp_macchiato" id="theme_input_ctp_macchiato">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpmacchiato" value="ctp_macchiato">
<label class="form-check-label" for="theme_ctpmacchiato">Catppuccin Macchiato</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_ctp_frappe" id="theme_input_ctp_frappe">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpfrappe" value="ctp_frappe">
<label class="form-check-label" for="theme_ctpfrappe">Catppuccin Frappé</label>
<span class="button_example">Example</span>
</div>
<div class="form-check theme_preview_ctp_latte" id="theme_input_ctp_latte">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_ctplatte" value="ctp_latte">
<label class="form-check-label" for="theme_ctplatte">Catppuccin Latte</label>
<span class="button_example">Example</span>
</div>
@foreach (var theme in Program.Web.RegisteredThemes.Values)
{
string themeName = $"{theme.Name.Replace(" (Legacy)","")}";
string themeId = $"{theme.ID}";
string themeIdNoUnderscore = $"{theme.ID.Replace("_", "")}";
<div class="form-check theme_preview_@themeId" id="theme_input_@themeId">
<input class="form-check-input" type="radio" name="theme_radio" id="theme_@themeIdNoUnderscore" value="@themeId" @(themeId == "modern_dark" ? "checked" : "")>
<label class="form-check-label" for="theme_@themeIdNoUnderscore">@themeName</label>
<iframe class="form-check-iframe" src="ThemePreview?theme=@themeId" loading="lazy"></iframe>
</div>
}
</fieldset>
</div>

Expand Down
34 changes: 34 additions & 0 deletions src/Pages/ThemePreview.cshtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
@page
@section Header {
<link rel="stylesheet" href="css/[email protected]" />
<link rel="stylesheet" href="css/[email protected]" />
}
<script>
(function () {
const urlParams = new URLSearchParams(window.location.search);
const themeId = urlParams.get('theme');
if (themeId) {
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.href = `css/themes/${themeId}.css`;
document.head.appendChild(linkElement);
}
})();
</script>

<div class="theme_preview-content">
<div class="theme_preview-item">
<p>Core Parameters will go here</p>
</div>

<hr>

<div class="theme_preview-item">
<div class="alt-prompt-buttons-wrapper">
<button class="alt-prompt-buttons alt-prompt-generate-button basic-button translate" id="alt_generate_button">Generate</button>
<button class="alt-prompt-buttons alt-prompt-center-button basic-button" id="alt_center_button">&#x2B9F;</button>
<button class="alt-prompt-buttons interrupt-button interrupt-button-none alt-interrupt" id="alt_interrupt_button">&times;</button>
</div>
</div>
</div>
174 changes: 23 additions & 151 deletions src/wwwroot/css/installer.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
26 changes: 26 additions & 0 deletions src/wwwroot/css/themepreview.css
Original file line number Diff line number Diff line change
@@ -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;
}