mirror of
https://github.com/vladmandic/sdnext.git
synced 2026-01-27 15:02:48 +03:00
1181 lines
24 KiB
CSS
1181 lines
24 KiB
CSS
/* Generic HTML Tags */
|
|
@font-face {
|
|
font-family: 'NotoSans';
|
|
font-display: swap;
|
|
font-style: normal;
|
|
font-weight: 100;
|
|
src: local('NotoSansNerd'), url('notosans-nerdfont-regular.ttf');
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
:root,
|
|
.light,
|
|
.dark {
|
|
--font: 'NotoSans';
|
|
--font-mono: 'ui-monospace', 'Consolas', monospace;
|
|
--font-size: 16px;
|
|
|
|
/* Primary Colors */
|
|
--primary-50: #7dffff;
|
|
--primary-100: #72e8e8;
|
|
--primary-200: #67d2d2;
|
|
--primary-300: #5dbcbc;
|
|
--primary-400: #52a7a7;
|
|
--primary-500: #489292;
|
|
--primary-600: #3e7d7d;
|
|
--primary-700: #356969;
|
|
--primary-800: #2b5656;
|
|
--primary-900: #224444;
|
|
--primary-950: #193232;
|
|
|
|
/* Neutral Colors */
|
|
--neutral-50: #f0f0f0;
|
|
--neutral-100: #e0e0e0;
|
|
--neutral-200: #d0d0d0;
|
|
--neutral-300: #b0b0b0;
|
|
--neutral-400: #909090;
|
|
--neutral-500: #707070;
|
|
--neutral-600: #606060;
|
|
--neutral-700: #404040;
|
|
--neutral-800: #303030;
|
|
--neutral-900: #202020;
|
|
--neutral-950: #101010;
|
|
|
|
/* Highlight and Inactive Colors */
|
|
--highlight-color: var(--primary-200);
|
|
--inactive-color: var(--primary-800);
|
|
|
|
/* Text Colors */
|
|
--body-text-color: var(--neutral-100);
|
|
--body-text-color-subdued: var(--neutral-300);
|
|
|
|
/* Background Colors */
|
|
--background-color: var(--neutral-950);
|
|
--background-fill-primary: var(--neutral-800);
|
|
--input-background-fill: var(--neutral-900);
|
|
|
|
/* Padding and Borders */
|
|
--input-padding: 4px;
|
|
--input-shadow: none;
|
|
--button-primary-text-color: var(--neutral-100);
|
|
--button-primary-background-fill: var(--primary-600);
|
|
--button-primary-background-fill-hover: var(--primary-800);
|
|
--button-secondary-text-color: var(--neutral-100);
|
|
--button-secondary-background-fill: var(--neutral-900);
|
|
--button-secondary-background-fill-hover: var(--neutral-600);
|
|
|
|
/* Border Radius */
|
|
--radius-xs: 2px;
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 10px;
|
|
--radius-xxl: 15px;
|
|
--radius-xxxl: 20px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
--shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.1);
|
|
|
|
/* Animation */
|
|
--transition: all 0.3s ease;
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-bg: var(--neutral-800);
|
|
--scrollbar-thumb: var(--highlight-color);
|
|
}
|
|
|
|
html {
|
|
font-size: var(--font-size);
|
|
font-family: var(--font);
|
|
}
|
|
|
|
body,
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-family: var(--font);
|
|
color: var(--body-text-color);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
button {
|
|
max-width: 400px;
|
|
white-space: nowrap;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
background-color: var(--button-primary-background-fill);
|
|
color: var(--button-primary-text-color);
|
|
cursor: pointer;
|
|
box-shadow: var(--shadow-sm);
|
|
transition: transform 0.2s ease, background-color 0.3s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: var(--button-primary-background-fill-hover);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Range Input Styles */
|
|
.slider-container {
|
|
width: 100%;
|
|
/* Ensures the container takes full width */
|
|
max-width: 100%;
|
|
/* Prevents overflow */
|
|
padding: 0 10px;
|
|
/* Adds padding for aesthetic spacing */
|
|
box-sizing: border-box;
|
|
/* Ensures padding doesn't affect width */
|
|
}
|
|
|
|
input[type='range'] {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 1em;
|
|
background-color: transparent;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
box-shadow: none;
|
|
-webkit-appearance: none;
|
|
opacity: 0.7;
|
|
appearance: none;
|
|
width: 100%;
|
|
/* Makes the slider responsive */
|
|
}
|
|
|
|
input[type='range'] {
|
|
opacity: 1;
|
|
}
|
|
|
|
input[type='range']::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
height: 1em;
|
|
width: 1em;
|
|
background-color: var(--highlight-color);
|
|
border-radius: var(--radius-xs);
|
|
box-shadow: var(--shadow-md);
|
|
cursor: pointer;
|
|
/* Ensures the thumb is clickable */
|
|
}
|
|
|
|
input[type='range']::-webkit-slider-runnable-track {
|
|
-webkit-appearance: none;
|
|
height: 6px;
|
|
background: var(--input-background-fill);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
input[type='range']::-moz-range-thumb {
|
|
height: 1em;
|
|
width: 1em;
|
|
background-color: var(--highlight-color);
|
|
border-radius: var(--radius-xs);
|
|
box-shadow: var(--shadow-md);
|
|
cursor: pointer;
|
|
/* Ensures the thumb is clickable */
|
|
}
|
|
|
|
input[type='range']::-moz-range-track {
|
|
height: 6px;
|
|
background: var(--input-background-fill);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.slider-container {
|
|
width: 100%;
|
|
/* Adjust width for smaller screens */
|
|
}
|
|
|
|
.networks-menu,
|
|
.styles-menu {
|
|
width: 100%;
|
|
/* Ensure menus are full width */
|
|
margin: 0;
|
|
/* Reset margins for smaller screens */
|
|
}
|
|
}
|
|
|
|
/* Scrollbar Styles */
|
|
:root {
|
|
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--scrollbar-bg);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--scrollbar-thumb);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
/* Tab Navigation Styles */
|
|
.tab-nav {
|
|
display: flex;
|
|
/* Use flexbox for layout */
|
|
justify-content: space-evenly;
|
|
/* Space out the tabs evenly */
|
|
align-items: center;
|
|
/* Center items vertically */
|
|
background: var(--background-color);
|
|
/* Background color */
|
|
border-bottom: 1px dashed var(--highlight-color) !important;
|
|
/* Bottom border for separation */
|
|
box-shadow: var(--shadow-md);
|
|
/* Shadow for depth */
|
|
margin-bottom: 5px;
|
|
/* Add some space between the tab nav and the content */
|
|
padding-bottom: 5px;
|
|
/* Add space between buttons and border */
|
|
}
|
|
|
|
/* Individual Tab Styles */
|
|
.tab-nav>button {
|
|
background: var(--neutral-900);
|
|
/* No background for default state */
|
|
color: var(--text-color);
|
|
/* Text color */
|
|
border: 1px solid var(--highlight-color);
|
|
/* No border */
|
|
border-radius: var(--radius-xxl);
|
|
/* Rounded corners */
|
|
cursor: pointer;
|
|
/* Pointer cursor */
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|
/* Smooth transition */
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
/* Active Tab Style */
|
|
.tab-nav>button.selected {
|
|
background: var(--primary-100);
|
|
/* Highlight active tab */
|
|
color: var(--background-color);
|
|
/* Change text color for active tab */
|
|
}
|
|
|
|
/* Hover State for Tabs */
|
|
.tab-nav>button:hover {
|
|
background: var(--highlight-color);
|
|
/* Background on hover */
|
|
color: var(--background-color);
|
|
/* Change text color on hover */
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
.tab-nav {
|
|
flex-direction: column;
|
|
/* Stack tabs vertically on smaller screens */
|
|
align-items: stretch;
|
|
/* Stretch tabs to full width */
|
|
}
|
|
|
|
.tab-nav>button {
|
|
width: 100%;
|
|
/* Full width for buttons */
|
|
text-align: left;
|
|
/* Align text to the left */
|
|
}
|
|
}
|
|
|
|
/* Quick Settings Panel Styles */
|
|
#quicksettings {
|
|
background: var(--background-color);
|
|
/* Background color */
|
|
box-shadow: var(--shadow-lg);
|
|
/* Shadow for depth */
|
|
border-radius: var(--radius-lg);
|
|
/* Rounded corners */
|
|
padding: 1em;
|
|
/* Padding for spacing */
|
|
z-index: 200;
|
|
/* Ensure it stays on top */
|
|
}
|
|
|
|
/* Quick Settings Header */
|
|
#quicksettings .header {
|
|
font-size: var(--text-lg);
|
|
/* Font size for header */
|
|
font-weight: bold;
|
|
/* Bold text */
|
|
margin-bottom: 0.5em;
|
|
/* Space below header */
|
|
}
|
|
|
|
/* Quick Settings Options */
|
|
#quicksettings .option {
|
|
display: flex;
|
|
/* Flexbox for layout */
|
|
justify-content: space-between;
|
|
/* Space between label and toggle */
|
|
align-items: center;
|
|
/* Center items vertically */
|
|
padding: 0.5em 0;
|
|
/* Padding for each option */
|
|
border-bottom: 1px solid var(--neutral-600);
|
|
/* Separator line */
|
|
}
|
|
|
|
/* Option Label Styles */
|
|
#quicksettings .option label {
|
|
color: var(--text-color);
|
|
/* Text color */
|
|
}
|
|
|
|
/* Toggle Switch Styles */
|
|
#quicksettings .option input[type="checkbox"] {
|
|
cursor: pointer;
|
|
/* Pointer cursor */
|
|
}
|
|
|
|
/* Quick Settings Footer */
|
|
#quicksettings .footer {
|
|
margin-top: 1em;
|
|
/* Space above footer */
|
|
text-align: right;
|
|
/* Align text to the right */
|
|
}
|
|
|
|
/* Close Button Styles */
|
|
#quicksettings .footer button {
|
|
background: var(--button-primary-background-fill);
|
|
/* Button background */
|
|
color: var(--button-primary-text-color);
|
|
/* Button text color */
|
|
border: none;
|
|
/* No border */
|
|
border-radius: var(--radius-md);
|
|
/* Rounded corners */
|
|
padding: 0.5em 1em;
|
|
/* Padding for button */
|
|
cursor: pointer;
|
|
/* Pointer cursor */
|
|
transition: 0.3s ease;
|
|
/* Smooth transition */
|
|
}
|
|
|
|
/* Close Button Hover State */
|
|
#quicksettings .footer button:hover {
|
|
background: var(--highlight-color);
|
|
/* Change background on hover */
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (max-width: 768px) {
|
|
#quicksettings {
|
|
right: 10px;
|
|
/* Adjust position for smaller screens */
|
|
width: 90%;
|
|
/* Full width on smaller screens */
|
|
}
|
|
}
|
|
|
|
/* Form Styles */
|
|
div.form, #txt2img_seed_row, #txt2img_subseed_row {
|
|
border-width: 0;
|
|
box-shadow: var(--shadow-md);
|
|
background: var(--background-fill-primary);
|
|
border-bottom: 3px solid var(--highlight-color);
|
|
padding: 3px;
|
|
border-radius: var(--radius-lg);
|
|
margin: 1px;
|
|
}
|
|
|
|
/* Image preview styling*/
|
|
#txt2img_gallery {
|
|
background: var(--background-fill-primary);
|
|
padding: 5px;
|
|
margin: 0px;
|
|
}
|
|
|
|
@keyframes colorChange {
|
|
0% {
|
|
background-color: var(--neutral-800);
|
|
}
|
|
50% {
|
|
background-color: var(--neutral-700);
|
|
}
|
|
100% {
|
|
background-color: var(--neutral-800);
|
|
}
|
|
}
|
|
|
|
.livePreview {
|
|
animation: colorChange 3s ease-in-out infinite; /* Adjust the duration as needed */
|
|
padding: 5px;
|
|
}
|
|
|
|
/* Gradio Style Classes */
|
|
fieldset .gr-block.gr-box,
|
|
label.block span {
|
|
padding: 0;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.border-2 {
|
|
border-width: 0;
|
|
}
|
|
|
|
.border-b-2 {
|
|
border-bottom-width: 2px;
|
|
border-color: var(--highlight-color) !important;
|
|
padding-bottom: 2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.bg-white {
|
|
color: lightyellow;
|
|
background-color: var(--inactive-color);
|
|
}
|
|
|
|
.gr-box {
|
|
border-radius: var(--radius-sm) !important;
|
|
background-color: var(--neutral-950) !important;
|
|
box-shadow: var(--shadow-md);
|
|
border-width: 0;
|
|
padding: 4px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.gr-button {
|
|
font-weight: normal;
|
|
box-shadow: var(--shadow-sm);
|
|
font-size: 0.8rem;
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
padding: 3px;
|
|
margin: 3px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.gr-button:hover {
|
|
background-color: var(--highlight-color);
|
|
}
|
|
|
|
.gr-check-radio {
|
|
background-color: var(--inactive-color);
|
|
border-width: 0;
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.gr-check-radio:checked {
|
|
background-color: var(--highlight-color);
|
|
}
|
|
|
|
.gr-compact {
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.gr-form {
|
|
border-width: 0;
|
|
}
|
|
|
|
.gr-input {
|
|
background-color: var(--neutral-800) !important;
|
|
padding: 4px;
|
|
margin: 4px;
|
|
border-radius: var(--radius-md);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.gr-input:hover {
|
|
background-color: var(--neutral-700);
|
|
}
|
|
|
|
.gr-input-label {
|
|
color: lightyellow;
|
|
border-width: 0;
|
|
background: transparent;
|
|
padding: 2px !important;
|
|
}
|
|
|
|
.gr-panel {
|
|
background-color: var(--background-color);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.eta-bar {
|
|
display: none !important;
|
|
}
|
|
|
|
.gradio-slider {
|
|
max-width: 200px;
|
|
}
|
|
|
|
.gradio-slider input[type="number"] {
|
|
background: var(--neutral-950);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.gradio-image {
|
|
height: unset !important;
|
|
}
|
|
|
|
svg.feather.feather-image,
|
|
.feather .feather-image {
|
|
display: none;
|
|
}
|
|
|
|
.gap-2 {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.gr-box>div>div>input.gr-text-input {
|
|
right: 0;
|
|
width: 4em;
|
|
padding: 0;
|
|
top: -12px;
|
|
border: none;
|
|
max-height: 20px;
|
|
}
|
|
|
|
.output-html {
|
|
line-height: 1.2rem;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.output-html>div {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.overflow-hidden .flex .flex-col .relative col .gap-4 {
|
|
min-width: var(--left-column);
|
|
max-width: var(--left-column);
|
|
}
|
|
|
|
.p-2 {
|
|
padding: 0;
|
|
}
|
|
|
|
.px-4 {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.py-6 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tabs {
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.block.token-counter span {
|
|
background-color: var(--input-background-fill) !important;
|
|
box-shadow: 2px 2px 2px #111;
|
|
border: none !important;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.label-wrap {
|
|
margin: 8px 0px 4px 0px;
|
|
}
|
|
|
|
.gradio-button.tool {
|
|
border: none;
|
|
background: none;
|
|
box-shadow: none;
|
|
filter: hue-rotate(340deg) saturate(0.5);
|
|
}
|
|
|
|
#tab_extensions table td,
|
|
#tab_extensions table th,
|
|
#tab_config table td,
|
|
#tab_config table th {
|
|
border: none;
|
|
}
|
|
|
|
#tab_extensions table tr:hover,
|
|
#tab_config table tr:hover {
|
|
background-color: var(--neutral-500) !important;
|
|
}
|
|
|
|
#tab_extensions table,
|
|
#tab_config table {
|
|
width: 96vw;
|
|
}
|
|
|
|
#tab_extensions table thead,
|
|
#tab_config table thead {
|
|
background-color: var(--neutral-700);
|
|
}
|
|
|
|
#tab_extensions table,
|
|
#tab_config table {
|
|
background-color: var(--neutral-900);
|
|
}
|
|
|
|
/* Automatic Style Classes */
|
|
.progressDiv {
|
|
border-radius: var(--radius-sm) !important;
|
|
position: fixed;
|
|
top: 44px;
|
|
right: 26px;
|
|
max-width: 262px;
|
|
height: 48px;
|
|
z-index: 99;
|
|
box-shadow: var(--button-shadow);
|
|
}
|
|
|
|
.progressDiv .progress {
|
|
border-radius: var(--radius-lg) !important;
|
|
background: var(--highlight-color);
|
|
line-height: 3rem;
|
|
height: 48px;
|
|
}
|
|
|
|
.gallery-item {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.performance {
|
|
color: #888;
|
|
}
|
|
|
|
.image-buttons {
|
|
justify-content: center;
|
|
gap: 0 !important;
|
|
}
|
|
|
|
.image-buttons>button {
|
|
max-width: 160px;
|
|
}
|
|
|
|
.tooltip {
|
|
background: var(--primary-300);
|
|
color: black;
|
|
border: none;
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
#system_row>button,
|
|
#settings_row>button,
|
|
#config_row>button {
|
|
max-width: 10em;
|
|
}
|
|
|
|
/* Gradio Elements Overrides */
|
|
#div.gradio-container {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#img2img_label_copy_to_img2img {
|
|
font-weight: normal;
|
|
}
|
|
|
|
#txt2img_styles,
|
|
#img2img_styles,
|
|
#control_styles {
|
|
padding: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
#txt2img_styles_refresh,
|
|
#img2img_styles_refresh,
|
|
#control_styles_refresh {
|
|
padding: 0;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
#img2img_settings {
|
|
min-width: calc(2 * var(--left-column));
|
|
max-width: calc(2 * var(--left-column));
|
|
background-color: var(--neutral-950);
|
|
padding-top: 16px;
|
|
}
|
|
|
|
#interrogate,
|
|
#deepbooru {
|
|
margin: 0 0px 10px 0px;
|
|
max-width: 80px;
|
|
max-height: 80px;
|
|
font-weight: normal;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
#quicksettings .gr-button-tool {
|
|
font-size: 1.6rem;
|
|
box-shadow: none;
|
|
margin-left: -20px;
|
|
margin-top: -2px;
|
|
height: 2.4em;
|
|
}
|
|
|
|
#save-animation {
|
|
border-radius: var(--radius-sm) !important;
|
|
margin-bottom: 16px;
|
|
background-color: var(--neutral-950);
|
|
}
|
|
|
|
#script_list {
|
|
padding: 4px;
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
#settings>div.flex-wrap {
|
|
width: 15em;
|
|
}
|
|
|
|
#txt2img_cfg_scale {
|
|
min-width: 200px;
|
|
}
|
|
|
|
#txt2img_checkboxes,
|
|
#img2img_checkboxes,
|
|
#control_checkboxes {
|
|
background-color: transparent;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
#extras_upscale {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#txt2img_progress_row>div {
|
|
min-width: var(--left-column);
|
|
max-width: var(--left-column);
|
|
}
|
|
|
|
#txt2img_settings {
|
|
min-width: var(--left-column);
|
|
max-width: var(--left-column);
|
|
background-color: var(--neutral-950);
|
|
}
|
|
|
|
#pnginfo_html2_info {
|
|
margin-top: -18px;
|
|
background-color: var(--input-background-fill);
|
|
padding: var(--input-padding);
|
|
}
|
|
|
|
#txt2img_styles_row,
|
|
#img2img_styles_row,
|
|
#control_styles_row {
|
|
margin-top: -6px;
|
|
}
|
|
|
|
.block>span {
|
|
margin-bottom: 0 !important;
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
/* Networks Container */
|
|
#extra_networks_root {
|
|
z-index: 100;
|
|
background: var(--background-color);
|
|
box-shadow: var(--shadow-md);
|
|
border-radius: var(--radius-lg);
|
|
transform: translateX(100%);
|
|
animation: slideIn 0.5s forwards;
|
|
overflow: hidden;
|
|
/* Prevents overflow of content */
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* Networks Styles */
|
|
.extra-networks {
|
|
border-left: 2px solid var(--highlight-color) !important;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.extra-networks .tab-nav>button:hover {
|
|
background: var(--highlight-color);
|
|
}
|
|
|
|
/* Network tab search and description important fix, dont remove */
|
|
#txt2img_description,
|
|
#txt2img_extra_search,
|
|
#img2img_description,
|
|
#img2img_extra_search,
|
|
#video_description,
|
|
#video_extra_search,
|
|
#control_description,
|
|
#control_extra_search {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.extra-networks .buttons>button:hover {
|
|
background: var(--highlight-color);
|
|
}
|
|
|
|
/* Network Cards Container */
|
|
.extra-network-cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
align-content: flex-start;
|
|
padding-top: 20px;
|
|
justify-content: center;
|
|
width: 100%;
|
|
/* Ensures it takes full width */
|
|
}
|
|
|
|
/* Individual Card Styles */
|
|
.extra-network-cards .card {
|
|
height: fit-content;
|
|
margin: 0 0 0.5em 0.5em;
|
|
position: relative;
|
|
scroll-snap-align: start;
|
|
scroll-margin-top: 0;
|
|
background: var(--neutral-800);
|
|
/* Background for cards */
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
/* Overlay Styles */
|
|
.extra-network-cards .card .overlay {
|
|
z-index: 10;
|
|
width: 100%;
|
|
background: none;
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
/* Preview Styles */
|
|
.extra-network-cards .card .preview {
|
|
box-shadow: var(--button-shadow);
|
|
min-height: 30px;
|
|
border-radius: var(--radius-md);
|
|
z-index: 9999;
|
|
}
|
|
|
|
/* Hover Effects */
|
|
.extra-network-cards .card:hover {
|
|
transform: scale(1.3);
|
|
z-index: 9999; /* Use a high value to ensure it appears on top */
|
|
transition: transform 0.3s ease, z-index 0s; /* Smooth transition */
|
|
}
|
|
|
|
.extra-network-cards .card:hover .overlay {
|
|
z-index: 10000; /* Ensure overlay is also on top */
|
|
}
|
|
|
|
.extra-network-cards .card:hover .preview {
|
|
box-shadow: none;
|
|
filter: grayscale(0%);
|
|
}
|
|
|
|
/* Tags Styles */
|
|
.extra-network-cards .card .tags {
|
|
display: none;
|
|
overflow-wrap: anywhere;
|
|
position: absolute;
|
|
top: 100%;
|
|
z-index: 20;
|
|
background: var(--body-background-fill);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
max-height: 333px;
|
|
}
|
|
|
|
/* Individual Tag Styles */
|
|
.extra-network-cards .card .tag {
|
|
padding: 2px;
|
|
margin: 2px;
|
|
background: rgba(70, 70, 70, 0.60);
|
|
font-size: var(--text-md);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Actions Styles */
|
|
.extra-network-cards .card .actions>span {
|
|
padding: 4px;
|
|
font-size: 34px !important;
|
|
}
|
|
|
|
.extra-network-cards .card .actions {
|
|
background: none;
|
|
}
|
|
|
|
.extra-network-cards .card .actions .details {
|
|
bottom: 50px;
|
|
background-color: var(--neutral-800);
|
|
}
|
|
|
|
.extra-network-cards .card .actions>span:hover {
|
|
color: var(--highlight-color);
|
|
}
|
|
|
|
/* Version Styles */
|
|
.extra-network-cards .card .version {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 2px;
|
|
font-weight: bolder;
|
|
text-shadow: 1px 1px black;
|
|
text-transform: uppercase;
|
|
background: gray;
|
|
opacity: 75%;
|
|
margin: 4px;
|
|
line-height: 0.9rem;
|
|
}
|
|
|
|
/* Hover Actions */
|
|
.extra-network-cards .card:hover .actions {
|
|
display: block;
|
|
}
|
|
|
|
.extra-network-cards .card:hover .tags {
|
|
display: block;
|
|
}
|
|
|
|
/* No Preview Card Styles */
|
|
.extra-network-cards .card:has(>img[src*="missing.png"])::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
mix-blend-mode: multiply;
|
|
background-color: var(--data-color);
|
|
}
|
|
|
|
/* Card List Styles */
|
|
.extra-network-cards .card-list {
|
|
display: flex;
|
|
margin: 0.3em;
|
|
padding: 0.3em;
|
|
background: var(--input-background-fill);
|
|
cursor: pointer;
|
|
border-radius: var(--button-large-radius);
|
|
}
|
|
|
|
.extra-network-cards .card-list .tag {
|
|
color: var(--primary-500);
|
|
margin-left: 0.8em;
|
|
}
|
|
|
|
/* Correction color picker styling */
|
|
#txt2img_hdr_color_picker label input {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* loader */
|
|
.splash {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.motd {
|
|
margin-top: 1em;
|
|
color: var(--body-text-color-subdued);
|
|
font-family: monospace;
|
|
font-variant: all-petite-caps;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.splash-img {
|
|
margin: 10% auto 0 auto;
|
|
width: 512px;
|
|
height: 512px;
|
|
background-repeat: no-repeat;
|
|
animation: hue 5s infinite alternate;
|
|
}
|
|
|
|
.loading {
|
|
color: white;
|
|
position: absolute;
|
|
top: 85%;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.loader {
|
|
width: 100px;
|
|
height: 100px;
|
|
border: var(--spacing-md) solid transparent;
|
|
border-radius: 50%;
|
|
border-top: var(--spacing-md) solid var(--primary-600);
|
|
animation: spin 2s linear infinite, pulse 1.5s ease-in-out infinite;
|
|
position: absolute;
|
|
}
|
|
|
|
.loader::before,
|
|
.loader::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 6px;
|
|
bottom: 6px;
|
|
left: 6px;
|
|
right: 6px;
|
|
border-radius: 50%;
|
|
border: var(--spacing-md) solid transparent;
|
|
}
|
|
|
|
.loader::before {
|
|
border-top-color: var(--primary-900);
|
|
animation: spin 3s linear infinite;
|
|
}
|
|
|
|
.loader::after {
|
|
border-top-color: var(--primary-300);
|
|
animation: spin 1.5s linear infinite;
|
|
}
|
|
|
|
@keyframes move {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes color {
|
|
0% {
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
100% {
|
|
filter: hue-rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Token counters styling */
|
|
#txt2img_token_counter, #txt2img_negative_token_counter {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-top: 1px;
|
|
opacity: 0.6;
|
|
z-index: 99;
|
|
}
|
|
|
|
#txt2img_prompt_container {
|
|
margin: 5px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#text2img_prompt label, #text2img_neg_prompt label {
|
|
margin: 0px;
|
|
}
|
|
|
|
/* Based on Gradio Built-in Dark Theme */
|
|
:root, .light, .dark {
|
|
--body-background-fill: var(--background-color);
|
|
--color-accent-soft: var(--neutral-700);
|
|
--background-fill-secondary: none;
|
|
--border-color-accent: var(--background-color);
|
|
--border-color-primary: var(--background-color);
|
|
--link-text-color-active: var(--primary-500);
|
|
--link-text-color: var(--secondary-500);
|
|
--link-text-color-hover: var(--secondary-400);
|
|
--link-text-color-visited: var(--secondary-600);
|
|
--shadow-spread: 1px;
|
|
--block-background-fill: none;
|
|
--block-border-color: var(--border-color-primary);
|
|
--block_border_width: none;
|
|
--block-info-text-color: var(--body-text-color-subdued);
|
|
--block-label-background-fill: var(--background-fill-secondary);
|
|
--block-label-border-color: var(--border-color-primary);
|
|
--block_label_border_width: none;
|
|
--block-label-text-color: var(--neutral-200);
|
|
--block-shadow: none;
|
|
--block-title-background-fill: none;
|
|
--block-title-border-color: none;
|
|
--block-title-border-width: 0px;
|
|
--block-title-padding: 0;
|
|
--block-title-radius: none;
|
|
--block-title-text-size: var(--text-md);
|
|
--block-title-text-weight: 400;
|
|
--container-radius: var(--radius-lg);
|
|
--form-gap-width: 1px;
|
|
--layout-gap: var(--spacing-xxl);
|
|
--panel-border-width: 0;
|
|
--section-header-text-size: var(--text-md);
|
|
--section-header-text-weight: 400;
|
|
--checkbox-border-radius: var(--radius-sm);
|
|
--checkbox-label-gap: 2px;
|
|
--checkbox-label-padding: var(--spacing-md);
|
|
--checkbox-label-shadow: var(--shadow-drop);
|
|
--checkbox-label-text-size: var(--text-md);
|
|
--checkbox-label-text-weight: 400;
|
|
--checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
--radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
|
--checkbox-shadow: var(--input-shadow);
|
|
--error-border-width: 1px;
|
|
--input-border-width: 0;
|
|
--input-radius: var(--radius-lg);
|
|
--input-text-size: var(--text-md);
|
|
--input-text-weight: 400;
|
|
--prose-text-size: var(--text-md);
|
|
--prose-text-weight: 400;
|
|
--prose-header-text-weight: 400;
|
|
--slider-color: var(--neutral-900);
|
|
--table-radius: var(--radius-lg);
|
|
--button-large-padding: 2px 6px;
|
|
--button-large-radius: var(--radius-lg);
|
|
--button-large-text-size: var(--text-lg);
|
|
--button-large-text-weight: 400;
|
|
--button-shadow: none;
|
|
--button-shadow-active: none;
|
|
--button-shadow-hover: none;
|
|
--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
|
|
--button-small-radius: var(--radius-lg);
|
|
--button-small-text-size: var(--text-md);
|
|
--button-small-text-weight: 400;
|
|
--button-transition: none;
|
|
--size-9: 64px;
|
|
--size-14: 64px;
|
|
}
|