1580158
/
kohya_ss
mirror of https://github.com/bmaltais/kohya_ss
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor: Differentiate section backgrounds for visual separation 

This commit updates `assets/style.css` to enhance visual distinction between UI sections in both light and dark themes, per your feedback.

Key changes:
- Restored original light theme background colors for UI sections, each having a unique subtle grey/off-white shade.
- Implemented new, distinct dark grey background shades for each UI section in the dark theme, ensuring they are visually separable.
- Updated hover effects for all sections in both themes to complement their unique background colors.
- Re-applied the modernized button styling (blue primary, teal accent) and associated text colors from a previous revision for overall theme consistency.

This approach provides clearer visual boundaries between different parts of the UI while maintaining a harmonious color scheme.
pull/3254/head
google-labs-jules[bot] 2025-05-26 12:37:01 +00:00
parent ccf82f96ac
commit 5b5278d6e7
1 changed files with 51 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
assets/style.css
View File

@ -61,81 +61,81 @@
} }
.advanced_background { .advanced_background {
background: #ffffff; background: #f4f4f4; /* Light neutral gray */
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; /* Added transition for smooth shadow effect */
} }
.advanced_background:hover { .advanced_background:hover {
background-color: #f8f9fa; background-color: #ebebeb; /* Slightly darker background on hover */
border: 1px solid #ced4da; border: 1px solid #ccc; /* Add a subtle border */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
} }
.basic_background { .basic_background {
background: #ffffff; background: #eaeff1; /* Muted cool gray */
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.basic_background:hover { .basic_background:hover {
background-color: #f8f9fa; background-color: #dfe4e7; /* Slightly darker cool gray on hover */
border: 1px solid #ced4da; border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
} }
.huggingface_background { .huggingface_background {
background: #ffffff; background: #e0e4e7; /* Light gray with a hint of blue */
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.huggingface_background:hover { .huggingface_background:hover {
background-color: #f8f9fa; background-color: #d6dce0; /* Slightly darker on hover */
border: 1px solid #ced4da; border: 1px solid #bbb;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
} }
.flux1_background { .flux1_background {
background: #ffffff; background: #ece9e6; /* Light beige tone */
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.flux1_background:hover { .flux1_background:hover {
background-color: #f8f9fa; background-color: #e2dfdb; /* Slightly darker beige on hover */
border: 1px solid #ced4da; border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
} }
.preset_background { .preset_background {
background: #ffffff; background: #f0f0f0; /* Light gray */
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.preset_background:hover { .preset_background:hover {
background-color: #f8f9fa; background-color: #e6e6e6; /* Slightly darker on hover */
border: 1px solid #ced4da; border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
} }
.samples_background { .samples_background {
background: #ffffff; background: #d9dde1; /* Soft muted gray-blue */
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.samples_background:hover { .samples_background:hover {
background-color: #f8f9fa; background-color: #cfd3d8; /* Slightly darker on hover */
border: 1px solid #ced4da; border: 1px solid #bbb;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
} }
/* Dark mode styles */ /* Dark mode styles */
@ -146,6 +146,7 @@
.dark #myTensorButton { .dark #myTensorButton {
background: #007bff; background: #007bff;
color: #f8f9fa; color: #f8f9fa;
/* Ensure other properties like border, border-radius, padding are consistent if needed */
box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05); box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
} }
@ -164,105 +165,105 @@
} }
.dark .advanced_background { .dark .advanced_background {
background: #121212; background: #222222;
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.dark .advanced_background:hover { .dark .advanced_background:hover {
background-color: #1a1a1a; background-color: #2c2c2c;
border: 1px solid #495057; border: 1px solid #444444;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.dark .basic_background { .dark .basic_background {
background: #121212; background: #1f2328;
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.dark .basic_background:hover { .dark .basic_background:hover {
background-color: #1a1a1a; background-color: #292d32;
border: 1px solid #495057; border: 1px solid #4a4e53;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.dark .huggingface_background { .dark .huggingface_background {
background: #121212; background: #1c2128;
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.dark .huggingface_background:hover { .dark .huggingface_background:hover {
background-color: #1a1a1a; background-color: #262b32;
border: 1px solid #495057; border: 1px solid #474c53;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.dark .flux1_background { .dark .flux1_background {
background: #121212; background: #252321;
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.dark .flux1_background:hover { .dark .flux1_background:hover {
background-color: #1a1a1a; background-color: #2f2d2b;
border: 1px solid #495057; border: 1px solid #4f4d4b;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.dark .preset_background { .dark .preset_background {
background: #121212; background: #1e1e1e;
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.dark .preset_background:hover { .dark .preset_background:hover {
background-color: #1a1a1a; background-color: #282828;
border: 1px solid #495057; border: 1px solid #404040;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.dark .samples_background { .dark .samples_background {
background: #121212; background: #1b242c;
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.dark .samples_background:hover { .dark .samples_background:hover {
background-color: #1a1a1a; background-color: #252e36;
border: 1px solid #495057; border: 1px solid #465058;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.flux1_rank_layers_background { .flux1_rank_layers_background {
background: #ffffff; background: #ece9e6; /* White background for clear theme */
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.flux1_rank_layers_background:hover { .flux1_rank_layers_background:hover {
background-color: #f8f9fa; background-color: #dddad7; /* Slightly darker on hover */
border: 1px solid #ced4da; border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
} }
.dark .flux1_rank_layers_background { .dark .flux1_rank_layers_background {
background: #121212; background: #252321;
padding: 1em; padding: 1em;
border-radius: 8px; border-radius: 8px;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
} }
.dark .flux1_rank_layers_background:hover { .dark .flux1_rank_layers_background:hover {
background-color: #1a1a1a; background-color: #2f2d2b;
border: 1px solid #495057; border: 1px solid #4f4d4b;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }