kohya_ss/assets/style.css

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

#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: #6c757d;
    font-size: small;
    text-align: right;
    padding-right: 1em;
}

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

#myTensorButton {
    background: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 0.5em 1em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

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

#myTensorButtonStop {
    background: #17a2b8;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 0.5em 1em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

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

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

.advanced_background:hover {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.basic_background {
    background: #ffffff;
    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: #f8f9fa;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.huggingface_background {
    background: #ffffff;
    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: #f8f9fa;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.flux1_background {
    background: #ffffff;
    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: #f8f9fa;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.preset_background {
    background: #ffffff;
    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: #f8f9fa;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.samples_background {
    background: #ffffff;
    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: #f8f9fa;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Dark mode styles */
.dark .ver-class {
    color: #adb5bd;
}

.dark #myTensorButton {
    background: #007bff;
    color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}

.dark #myTensorButton:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

.dark #myTensorButtonStop {
    background: #17a2b8;
    color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}

.dark #myTensorButtonStop:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

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

.dark .advanced_background:hover {
    background-color: #1a1a1a;
    border: 1px solid #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dark .basic_background {
    background: #121212;
    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: #1a1a1a;
    border: 1px solid #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dark .huggingface_background {
    background: #121212;
    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: #1a1a1a;
    border: 1px solid #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dark .flux1_background {
    background: #121212;
    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: #1a1a1a;
    border: 1px solid #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dark .preset_background {
    background: #121212;
    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: #1a1a1a;
    border: 1px solid #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dark .samples_background {
    background: #121212;
    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: #1a1a1a;
    border: 1px solid #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.flux1_rank_layers_background {
    background: #ffffff;
    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: #f8f9fa;
    border: 1px solid #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.dark .flux1_rank_layers_background {
    background: #121212;
    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: #1a1a1a;
    border: 1px solid #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}