Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Two new themes, a stylesheet, and old theme updates OH MY! #528

Draft
wants to merge 11 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 6 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
2 changes: 2 additions & 0 deletions src/Core/WebServer.cs
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,8 @@ public void PreInit()
RegisterTheme(new("eyesear_white", "Eyesear White", ["/css/themes/eyesear_white.css"], false));
RegisterTheme(new("swarmpunk", "Swarm Punk", ["/css/themes/modern.css", "/css/themes/swarmpunk.css"], true));
RegisterTheme(new("beweish", "Beweish", ["/css/themes/modern.css", "/css/themes/beweish.css"], true));
RegisterTheme(new("aquamarine", "Aquamarine", ["/css/themes/luminous.css", "/css/themes/aquamarine.css"], true));
RegisterTheme(new("pastel", "Pastel", ["/css/themes/luminous.css", "/css/themes/pastel.css"], true));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do these not use modern?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm submitting a new CSS stylesheet to use with these. You suggested submitting new stylesheets so I did. They have a different look and feel. Tabs are a bit different and the parameter groups are full tab sections. I can provide screenshots if needed.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That doesn't answer my question. Yes you have your own stylesheet. You have two in fact. But why is modern not included?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah, my bad I guess it wasn't registering in my head. I can add the modern style to them as well and I'll add the luminous to my swarm punk and bewish as well keeping the modern that's already on them. I think I'm up to speed now!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay so both luminous and modern are being used now and they are grouped by style sheet used.

Copy link
Member

@mcmonkey4eva mcmonkey4eva Jan 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wh... What.
You just doubled the number of themes? And still haven't answered my question. Why is modern.css not included in the file list for the themes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was trying to give people choice between the modern look and the luminous look if I add the modern.css to the themes file list then it overwrites the luminous style. Maybe I'm missing something still. The way it is there is the choice between two different styles modern and luminous. If I add modern.css and luminous.css it just makes them all modern with just a few elements of the luminous intact.

Because if you're wanting me to mix them then it's back to the drawing board because they do not play well together.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whatever changes luminous makes, should be made on top of modern.css. Modern is the starting point for anything developed newly like that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll have to work on that then because I'm not sure how I'll incorporate some of the stuff with both of the files being used.

}

/// <summary>Main prep, called by <see cref="Program"/>, generally should not be touched externally.</summary>
Expand Down
65 changes: 65 additions & 0 deletions src/wwwroot/css/themes/aquamarine.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
:root {
/* Core colors */
--background: #1a1a1a;
--background-soft: #2a2a2a;
--background-gray: #333333;
--background-gray-danger: #b22222;
--background-danger: #ff4c4c;
--shadow: rgba(0, 0, 0, 0.7);
--light-border: #444444;

/* Text colors */
--text: #e0e0e0;
--text-soft: #b0b0b0;
--popup-front: #ffffff;

/* UI Elements */
--emphasis: #00ffcc;
--emphasis-soft: #66ffe0;
--emphasis-text: #ffffff;
--border-color: #444444;

/* Buttons */
--button-text: #ffffff;
--button-background: #333333;
--button-background-hover: #444444;
--button-foreground-hover: #00ffcc;
--button-foreground-disabled: #666666;
--button-background-disabled: #333333;
--button-border: #444444;

/* Danger buttons */
--danger-button-background-hover: color-mix(in srgb, #ff4c4c 70%, black);
--danger-button-foreground-hover: #ffffff;
--danger-button-border: #ff4c4c;
--danger-button-foreground: #ffffff;
--danger-button-background: #b22222;

/* Panels and backgrounds */
--background-panel: #2a2a2a;
--background-panel-subtle: rgba(0, 255, 204, 0.1);

/* Input elements */
--range-track-color: #444444;
--range-thumb-color: #00ffcc;

/* Other UI elements */
--qbutton: var(--emphasis);
--batch-0: rgba(0, 255, 204, 0.3);
--batch-1: rgba(0, 200, 150, 0.3);
--popup-back: var(--background);

/* Selection colors */
--box-selected-border: rgba(0, 255, 204, 0.8);
--box-selected-background: rgba(0, 255, 204, 0.2);
--box-selected-border-stronger: rgba(0, 255, 204, 1.0);
--box-selected-background-stronger: rgba(0, 255, 204, 0.3);

/* Standard colors */
--red: #ff4c4c;
--green: #4caf50;

/* Shadow variables */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.7);
mcmonkey4eva marked this conversation as resolved.
Show resolved Hide resolved
191 changes: 191 additions & 0 deletions src/wwwroot/css/themes/luminous.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
/* Navi-Tab Styling*/
.nav-tabs {
background-color: var(--background-panel) !important;
border-bottom: 1px solid var(--border-color) !important;
padding: 0.5rem 0.5rem 0 0.5rem;
}

.nav-link {
color: var(--text) !important;
border: 1px solid transparent;
text-shadow: 0 0 5px var(--text);
}

.nav-link:hover, .nav-link.active {
color: var(--emphasis) !important;
border-color: var(--border-color);
background-color: var(--background-soft);
text-shadow: 0 0 10px var(--emphasis);
}

/*Card Glow Effect*/
.card {
background: var(--background-panel);
border: 1px solid var(--border-color);
box-shadow: 0 0 20px var(--emphasis-soft);
}

/* Menu Headers */
.input-group-header {
background-color: var(--background-gray);
color: var(--text);
padding: 0.5rem;
border-bottom: 1px solid var(--border-color);
text-shadow: 0 0 5px var(--text);
}

/* Neon glow effects */
.basic-button {
box-shadow: 0 0 10px var(--emphasis);
border: 1px solid var(--emphasis);
transition: all 0.3s ease;
background-color: var(--button-background);
color: var(--button-text);
}

.basic-button:hover {
box-shadow: 0 0 20px var(--emphasis);
text-shadow: 0 0 10px var(--text);
background-color: var(--button-background-hover);
}

/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: var(--background);
}

::-webkit-scrollbar-thumb {
background: var(--emphasis);
border-radius: 4px;
box-shadow: 0 0 5px var(--emphasis);
}

::-webkit-scrollbar-thumb:hover {
background: var(--emphasis-soft);
box-shadow: 0 0 10px var(--emphasis-soft);
}

/* Quick tools styling */
.t2i-area-quicktools {
border: 1px solid var(--border-color) !important;
box-shadow: var(--shadow-md) !important;
margin-top: -20px;
padding: 0.5rem;
}

/* Category Headers and Expand/Retract Buttons */
.auto-symbol {
display: inline-block;
text-align: center;
font-size: 20px;
width: 20px;
height: 17px;
background: var(--background-panel);
margin-right: 10px;
position: relative;
top: 0px;
transition: all 0.3s ease;
color: var(--text) !important;
}

.input-group .header-label {
font-size: 15px;
color: var(--text);
text-shadow: 0 0 5px var(--text);
}

.input-group .input-group-header {
position: unset;
margin: 0;
height: auto;
min-height: 32px;
color: var(--text);
user-select: none;
background-color: var(--background-panel);
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
text-shadow: 0 0 5px var(--text);
}

.input-group .input-group-header:hover {
color: var(--emphasis);
text-shadow: 0 0 10px var(--emphasis);
}

/* Add this to ensure proper spacing in the input group */
.input-group .input-group-content {
--spacing: 30px;
padding: 0;
max-width: unset;
margin-top: 10px;
}

.input-group .input-group-content > div {
padding: 5px 10px;
align-items: center;
}

.input-group .auto-input-name {
margin-right: 10px;
display: inline-flex;
flex-direction: row-reverse;
gap: 5px;
text-align: left;
}

/* Add styling for the quick buttons */
.auto-input-qbutton {
text-align: center;
border-color: var(--border-color) !important;
color: var(--text) !important;
align-self: center;
width: 20px;
height: 20px;
line-height: 18px;
margin-left: auto;
margin-right: 10px;
box-shadow: 0 0 5px var(--emphasis);
}

/* Input group header and expand/retract styling */
.input-group .input-group-header {
position: unset;
margin: 0;
height: auto;
min-height: 32px;
color: var(--text);
user-select: none;
background-color: var(--background-panel);
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
text-shadow: 0 0 5px var(--text);
}

.input-group .header-label-wrap {
position: relative;
top: unset;
left: unset;
margin: unset;
width: 100% !important;
}

.input-group .header-label {
font-size: 15px;
}

.input-group .input-group-header-shrinkable:hover {
color: var(--button-foreground-hover);
}

.input-group .input-group-header-activated {
background: transparent !important;
}
65 changes: 65 additions & 0 deletions src/wwwroot/css/themes/pastel.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
:root {
/* Core colors */
--background: #3c3c3c;
--background-soft: #4a4a4a;
--background-gray: #555555;
--background-gray-danger: #b22222;
--background-danger: #ff4c4c;
--shadow: rgba(0, 0, 0, 0.5);
--light-border: #666666;

/* Text colors */
--text: #e0e0e0;
--text-soft: #b0b0b0;
--popup-front: #ffffff;

/* UI Elements */
--emphasis: #ff9f5e;
--emphasis-soft: #ff8f6c;
--emphasis-text: #ffffff;
--border-color: #7172b3;

/* Buttons */
--button-text: #ffffff;
--button-background: #4db683;
--button-background-hover: #4db683;
--button-foreground-hover: #ff9f5e;
--button-foreground-disabled: #d3d3d3;
--button-background-disabled: #555555;
--button-border: #666666;

/* Danger buttons */
--danger-button-background-hover: color-mix(in srgb, #ff4c4c 70%, black);
--danger-button-foreground-hover: #ffffff;
--danger-button-border: #ff4c4c;
--danger-button-foreground: #ffffff;
--danger-button-background: #b22222;

/* Panels and backgrounds */
--background-panel: #4a4a4a;
--background-panel-subtle: rgba(255, 159, 94, 0.1);

/* Input elements */
--range-track-color: #666666;
--range-thumb-color: #4db683;

/* Other UI elements */
--qbutton: var(--emphasis);
--batch-0: rgba(255, 159, 94, 0.3);
--batch-1: rgba(77, 182, 131, 0.3);
--popup-back: var(--background);

/* Selection colors */
--box-selected-border: rgba(77, 182, 131, 0.8);
--box-selected-background: rgba(77, 182, 131, 0.2);
--box-selected-border-stronger: rgba(77, 182, 131, 1.0);
--box-selected-background-stronger: rgba(77, 182, 131, 0.3);

/* Standard colors */
--red: #ff4c4c;
--green: #4db683;

/* Shadow variables */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);