SECourses_Musubi_Trainer/assets/style.css

* {
    font-family: Tahoma, sans-serif !important;
}

#open_folder_small {
    min-width: auto;
    flex-grow: 0;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding: 0.5em;
    font-size: 1.5em;
}

#output_dir_button {
    font-size: 1.5em;
    padding: 0.25em;
    min-width: 2em;
    min-height: 2em;
}

#parent_folder_button {
    font-size: 1.5em;
    padding: 0.25em;
    min-width: 2em;
    min-height: 2em;
}

/* Folder/File selection buttons - consistent sizing */
#dit_button, #vae_button, #t5_button, #clip_button, #dit_high_noise_button,
#text_encoder_button, #logging_dir_button, #sample_prompts_button,
#sample_output_dir_button, #single_input_button, #single_output_button,
#input_folder_button, #output_folder_button {
    font-size: 1.5em;
    padding: 0.25em;
    min-width: 2em;
    min-height: 2em;
}

#open_folder {
    height: auto;
    flex-grow: 0;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

#number_input {
    min-width: min-content;
    flex-grow: 0.3;
    padding-left: 0.75em;
    padding-right: 0.75em;
}

.ver-class {
    color: #6d6d6d; /* Neutral dark gray */
    font-size: small;
    text-align: right;
    padding-right: 1em;
}

#myDropdown {
    height: auto;
    width: 33%;
    flex-grow: 0;
}

#myTensorButton {
    background: #555c66; /* Muted dark gray */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5em 1em;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Subtle shadow */
    /* transition: box-shadow 0.3s ease; */
}

#myTensorButton:hover {
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); Slightly increased shadow on hover */
}

#myTensorButtonStop {
    background: #777d85; /* Lighter muted gray */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5em 1em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* transition: box-shadow 0.3s ease; */
}

#myTensorButtonStop:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.advanced_background {
    background: #f4f4f4; /* Light neutral gray */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; /* Added transition for smooth shadow effect */
}

.advanced_background:hover {
    background-color: #ebebeb; /* Slightly darker background on hover */
    border: 1px solid #ccc; /* Add a subtle border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.basic_background {
    background: #eaeff1; /* Muted cool gray */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.basic_background:hover {
    background-color: #dfe4e7; /* Slightly darker cool gray on hover */
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.huggingface_background {
    background: #e0e4e7; /* Light gray with a hint of blue */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.huggingface_background:hover {
    background-color: #d6dce0; /* Slightly darker on hover */
    border: 1px solid #bbb;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.flux1_background {
    background: #ece9e6; /* Light beige tone */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.flux1_background:hover {
    background-color: #e2dfdb; /* Slightly darker beige on hover */
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.preset_background {
    background: #f0f0f0; /* Light gray */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.preset_background:hover {
    background-color: #e6e6e6; /* Slightly darker on hover */
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.samples_background {
    background: #d9dde1; /* Soft muted gray-blue */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.samples_background:hover {
    background-color: #cfd3d8; /* Slightly darker on hover */
    border: 1px solid #bbb;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

/* Dark mode styles */
.dark .advanced_background {
    background: #172029; /* Slightly darker gradio dark theme */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease; /* Added transition for smooth shadow effect */
}

.dark .advanced_background:hover {
    background-color: #121920; /* Slightly darker background on hover */
    border: 1px solid #000000; /* Add a subtle border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.dark .basic_background {
    background: #172029;
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.dark .basic_background:hover {
    background-color: #11181e;
    border: 1px solid #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.dark .huggingface_background {
    background: #131c25;
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.dark .huggingface_background:hover {
    background-color: #131c25;
    border: 1px solid #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.dark .flux1_background {
    background: #131c25;
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.dark .flux1_background:hover {
    background-color: #131c25;
    border: 1px solid #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.dark .preset_background {
    background: #191d25;
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.dark .preset_background:hover {
    background-color: #212530;
    border: 1px solid #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.dark .samples_background {
    background: #101e2c;
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.dark .samples_background:hover {
    background-color: #17293a;
    border: 1px solid #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.flux1_rank_layers_background {
    background: #ece9e6; /* White background for clear theme */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.flux1_rank_layers_background:hover {
    background-color: #dddad7; /* Slightly darker on hover */
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

.dark .flux1_rank_layers_background {
    background: #131c25; /* Dark background for dark theme */
    padding: 1em;
    border-radius: 8px;
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.dark .flux1_rank_layers_background:hover {
    background-color: #131c25; /* Slightly darker on hover */
    border: 1px solid #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}