mirror of https://github.com/Nevysha/Cozy-Nest.git
2002 lines
51 KiB
CSS
2002 lines
51 KiB
CSS
:root {
|
|
/*override by code when applying settings*/
|
|
--nevysha-margin-left: 175px;
|
|
--ae-primary-color: rgb(92, 175, 214);
|
|
--secondary-accent-color: #b67ee1;
|
|
--secondary-accent-color-from-luminance: white;
|
|
--nevysha-gradiant-1: rgb(101,0,94);
|
|
--nevysha-text-md: 12px;
|
|
--nevysha-color-from-luminance: black;
|
|
--extra-network-card-width: 13em;
|
|
--extra-network-card-height: 8em;
|
|
--nevysha-font-color: #d4d4d4;
|
|
/*--nevysha-icon-fill: var(--secondary-accent-color);*/
|
|
--nevysha-icon-fill: var(--nevysha-font-color);
|
|
|
|
--nevysha-font-color-subdued: #9ca3af;
|
|
--menu-top-height: 1px;
|
|
--main-container-height: 1px;
|
|
}
|
|
:root, .dark {
|
|
/*--nevysha-gradiant-1: #8777a1;*/
|
|
/*--nevysha-gradiant-2: #00adb5;*/
|
|
/*--nevysha-gradiant-3: #f98f69;*/
|
|
/*--nevysha-gradiant-4: #ea638c;*/
|
|
--nevysha-gradiant-2: rgb(28 28 28);
|
|
|
|
--body-background-fill: rgba(255, 255, 255, 0) !important;
|
|
|
|
/*primary button (ie "Generate")*/
|
|
--button-primary-background-fill: var(--primary-500);
|
|
/*--input-background-fill: #ffffffc4;*/
|
|
/*--input-background-fill-focus: var(--secondary-500);*/
|
|
/*--input-background-fill-hover: var(--input-background-fill);*/
|
|
|
|
/*--secondary-tabs-background-color: #ffffff75;*/
|
|
--tab-nav-background-color: #262626ad;
|
|
--tab-nav-background-color-selected: var(--input-background-fill);
|
|
/*--footer-text-color: #262626;*/
|
|
/*--btn-background-color: #549cdb;*/
|
|
|
|
/*--block-title-text-color: #0a0a0a;*/
|
|
/*--neutral-800: #0a0a0a;*/
|
|
/*--body-text-color: #0a0a0a;*/
|
|
/*--border-color-primary: #5050505e;*/
|
|
/*--panel-background-fill: #11182752;*/
|
|
|
|
/*--button-primary-border-color: var(--primary-500);*/
|
|
/*--button-primary-text-color: white;*/
|
|
/*--secondary-text-color: #2c2c2c;*/
|
|
/*--input-border-color: #a1a1a1;*/
|
|
|
|
--vertical-line-bg-color: #ffffff59;
|
|
|
|
--checkbox-background-color: var(--nevysha-dark);
|
|
|
|
--button-border-width: 0px;
|
|
--tabmenu-button-color: var(--nevysha-font-color);
|
|
|
|
--nevysha-dark: #1c1c1c;
|
|
--nevysha-light-dark: #292a2e;
|
|
--nevysha-white: var(--nevysha-font-color);
|
|
--nevysha-input-border-color: hsl(214deg 5% 30%);
|
|
|
|
--nevysha-color2: #f0a6caff;
|
|
--nevysha-color3: #efc3e6ff;
|
|
--nevysha-color4: #f0e6efff;
|
|
|
|
--main-tabs-background-color: #14141485;
|
|
--background-fill-primary: var(--nevysha-light-dark);
|
|
|
|
--ae-slider-bg-overlay: repeating-linear-gradient( 90deg, transparent, transparent max(3px, calc(0.671141% - 2px)), var(--ae-input-border-color) max(3px, calc(0.671141% - 2px)), var(--ae-input-border-color) max(4px, calc(0.671141% + 0px)) );
|
|
--ae-subgroup-input-bg-color: hsl(225deg 6% 13%);
|
|
|
|
--ae-input-border-color: hsl(214deg 5% 30%);
|
|
--ae-panel-border-radius: 0px;
|
|
--ae-input-bg-color: hsl(225deg 6% 13%);
|
|
--ae-input-color: var(--nevysha-font-color);
|
|
--block-title-text-color: var(--nevysha-font-color);
|
|
|
|
--primary-50: var(--nevysha-color4);
|
|
--primary-100: var(--nevysha-color4);
|
|
--primary-200: var(--nevysha-color3);
|
|
--primary-300: var(--nevysha-color3);
|
|
--primary-400: var(--nevysha-light-dark);
|
|
--primary-500: var(--nevysha-light-dark);
|
|
--primary-600: var(--nevysha-dark);
|
|
--primary-700: var(--nevysha-dark);
|
|
--primary-800: var(--nevysha-dark);
|
|
--primary-900: var(--nevysha-dark);
|
|
--primary-950: var(--nevysha-dark);
|
|
|
|
--secondary-50: var(--nevysha-color4);
|
|
--secondary-100: var(--nevysha-color4);
|
|
--secondary-200: var(--nevysha-color3);
|
|
--secondary-300: var(--nevysha-color3);
|
|
--secondary-400: var(--nevysha-light-dark);
|
|
--secondary-500: var(--nevysha-light-dark);
|
|
--secondary-600: var(--nevysha-dark);
|
|
--secondary-700: var(--nevysha-dark);
|
|
--secondary-800: var(--nevysha-dark);
|
|
--secondary-900: var(--nevysha-dark);
|
|
--secondary-950: var(--nevysha-dark);
|
|
|
|
--neutral-50: #f9fafb;
|
|
--neutral-100: #f3f4f6;
|
|
--neutral-200: #e5e7eb;
|
|
--neutral-300: #d1d5db;
|
|
--neutral-400: #9ca3af;
|
|
--neutral-500: #6b7280;
|
|
--neutral-600: var(--nevysha-light-dark);
|
|
--neutral-700: var(--nevysha-light-dark);
|
|
--neutral-800: var(--nevysha-light-dark);
|
|
--neutral-900: var(--nevysha-light-dark);
|
|
--neutral-950: var(--nevysha-light-dark);
|
|
|
|
--slider-color: var(--nevysha-dark);
|
|
--button-secondary-background-fill: var(--nevysha-dark);
|
|
--button-secondary-background-fill-hover: var(--nevysha-dark);
|
|
--checkbox-border-color: var(--nevysha-white);
|
|
--checkbox-border-color-hover: var(--ae-primary-color);
|
|
--color-accent: var(--ae-primary-color);
|
|
--link-text-color: var(--nevysha-white);
|
|
--body-text-color: var(--nevysha-font-color);
|
|
|
|
|
|
/*default dark*/
|
|
--color-accent-soft: var(--neutral-700);
|
|
--background-fill-secondary: var(--neutral-900);
|
|
--border-color-accent: var(--neutral-600);
|
|
--border-color-primary: var(--neutral-700);
|
|
--link-text-color-active: var(--secondary-500);
|
|
--link-text-color-hover: var(--ae-primary-color);
|
|
--link-text-color-visited: var(--secondary-600);
|
|
--body-text-color-subdued: var(--nevysha-font-color-subdued);
|
|
--shadow-drop: rgba(0,0,0,0.05) 0px 1px 2px 0px;
|
|
--shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--shadow-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
|
|
--block-background-fill: var(--neutral-800);
|
|
--block-label-border-color: var(--nevysha-input-border-color);
|
|
--block-label-text-color: var(--neutral-200);
|
|
--checkbox-background-color-selected: var(--secondary-600);
|
|
--checkbox-border-color-focus: var(--secondary-500);
|
|
--checkbox-border-color-selected: var(--checkbox-border-color);
|
|
--checkbox-label-background-fill: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
|
|
--checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
|
|
--error-background-fill: var(--background-fill-primary);
|
|
--error-text-color: #ef4444;
|
|
--input-background-fill: var(--nevysha-dark);
|
|
--input-background-fill-focus: var(--secondary-600);
|
|
--input-background-fill-hover: var(--input-background-fill);
|
|
--input-border-color-focus: var(--neutral-700);
|
|
--input-placeholder-color: var(--neutral-500);
|
|
--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700), var(--shadow-inset);
|
|
--stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600));
|
|
--table-border-color: var(--neutral-700);
|
|
--table-even-background-fill: var(--neutral-950);
|
|
--table-odd-background-fill: var(--neutral-900);
|
|
--button-cancel-background-fill: linear-gradient(to bottom right, #dc2626, #b91c1c);
|
|
--button-cancel-background-fill-hover: linear-gradient(to bottom right, #dc2626, #dc2626);
|
|
--button-cancel-border-color: #dc2626;
|
|
--button-cancel-border-color-hover: var(--button-cancel-border-color);
|
|
--button-cancel-text-color: white;
|
|
--button-cancel-text-color-hover: var(--button-cancel-text-color);
|
|
--button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-500), var(--primary-500));
|
|
--button-primary-border-color: var(--primary-500);
|
|
--button-primary-text-color: white;
|
|
--button-primary-text-color-hover: var(--button-primary-text-color);
|
|
--button-secondary-border-color: var(--neutral-600);
|
|
--button-secondary-text-color: var(--nevysha-font-color);
|
|
--button-secondary-text-color-hover: var(--button-secondary-text-color);
|
|
|
|
|
|
--shadow-spread: 1px;
|
|
--block-border-color: var(--border-color-primary);
|
|
--block_border_width: None;
|
|
--block-info-text-color: var(--nevysha-font-color-subdued);
|
|
--block-label-background-fill: var(--background-fill-secondary);
|
|
|
|
--block_label_border_width: None;
|
|
|
|
--block_shadow: None;
|
|
--block_title_background_fill: None;
|
|
--block_title_border_color: None;
|
|
--block_title_border_width: None;
|
|
|
|
--panel-background-fill: var(--background-fill-secondary);
|
|
--panel-border-color: var(--border-color-primary);
|
|
--panel_border_width: None;
|
|
--checkbox-background-color-focus: var(--checkbox-background-color);
|
|
--checkbox-background-color-hover: var(--checkbox-background-color);
|
|
|
|
--checkbox-border-width: var(--input-border-width);
|
|
--checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
|
|
--checkbox-label-border-color: var(--border-color-primary);
|
|
--checkbox-label-border-color-hover: var(--checkbox-label-border-color);
|
|
--checkbox-label-border-width: var(--input-border-width);
|
|
--checkbox-label-text-color: var(--body-text-color);
|
|
--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
|
|
|
|
--error-border-color: var(--border-color-primary);
|
|
--error_border_width: None;
|
|
|
|
--input-border-color: var(--border-color-primary);
|
|
--input-border-color-hover: var(--input-border-color);
|
|
--input_border_width: None;
|
|
--input_shadow: None;
|
|
--loader_color: None;
|
|
--slider_color: None;
|
|
--table-row-focus: var(--color-accent-soft);
|
|
--button-primary-border-color-hover: var(--button-primary-border-color);
|
|
--button-secondary-border-color-hover: var(--button-secondary-border-color);
|
|
--spacing-xxs: 1px;
|
|
--spacing-xs: 2px;
|
|
--spacing-sm: 3px;
|
|
--spacing-md: 6px;
|
|
--spacing-lg: 4px;
|
|
--spacing-xl: 10px;
|
|
--spacing-xxl: 16px;
|
|
--radius-xxs: 1px;
|
|
--radius-xs: 2px;
|
|
--radius-sm: 0;
|
|
--radius-md: 6px;
|
|
--radius-lg: 2px !important;
|
|
--radius-xl: 12px;
|
|
--radius-xxl: 22px;
|
|
--text-xxs: 9px;
|
|
--text-xs: 10px;
|
|
--text-sm: 12px;
|
|
--text-lg: 12px;
|
|
--text-xl: 22px;
|
|
--text-xxl: 26px;
|
|
--font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
|
|
--font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
|
|
--body-text-size: var(--nevysha-text-md);
|
|
--body-text-weight: 400;
|
|
--embed-radius: var(--radius-lg);
|
|
--block-border-width: 1px;
|
|
--block-info-text-size: var(--text-sm);
|
|
--block-info-text-weight: 400;
|
|
--block-label-border-width: 1px;
|
|
--block-label-margin: 0;
|
|
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
|
|
--block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
|
|
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
|
|
--block-label-text-size: var(--text-sm);
|
|
--block-label-text-weight: 400;
|
|
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
|
|
--block-radius: var(--radius-lg);
|
|
--block-shadow: var(--shadow-drop);
|
|
--block-title-background-fill: none;
|
|
--block-title-border-color: none;
|
|
--block-title-border-width: 1px;
|
|
--block-title-padding: 0;
|
|
--block-title-radius: none;
|
|
--block-title-text-size: var(--nevysha-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(--nevysha-text-md);
|
|
--section-header-text-weight: 400;
|
|
--checkbox-border-radius: var(--radius-sm);
|
|
--checkbox-label-gap: var(--spacing-lg);
|
|
--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
|
|
--checkbox-label-shadow: var(--shadow-drop);
|
|
--checkbox-label-text-size: var(--nevysha-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: 1px;
|
|
--input-padding: var(--spacing-xl);
|
|
--input-radius: var(--radius-lg);
|
|
--input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
|
|
--input-text-size: var(--nevysha-text-md);
|
|
--input-text-weight: 400;
|
|
--loader-color: var(--color-accent);
|
|
--prose-text-size: var(--nevysha-text-md);
|
|
--prose-text-weight: 400;
|
|
--prose-header-text-weight: 600;
|
|
--table-radius: var(--radius-lg);
|
|
--button-large-padding: 2px;
|
|
--button-large-radius: var(--radius-lg);
|
|
--button-large-text-size: var(--nevysha-text-md);
|
|
--button-large-text-weight: 600;
|
|
--button-shadow: var(--shadow-drop);
|
|
--button-shadow-active: var(--shadow-inset);
|
|
--button-shadow-hover: var(--shadow-drop-lg);
|
|
--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
|
|
--button-small-radius: var(--radius-lg);
|
|
--button-small-text-size: var(--nevysha-text-md);
|
|
--button-small-text-weight: 400;
|
|
--button-transition: none;
|
|
}
|
|
|
|
.nevysha-light {
|
|
--nevysha-gradiant-2: #fefefe;
|
|
|
|
--nevysha-white: var(--nevysha-font-color);
|
|
--nevysha-dark: #fefefe;
|
|
--nevysha-light-dark: #efefef;
|
|
--neutral-50: var(--nevysha-white);
|
|
--neutral-100: var(--nevysha-white);
|
|
--neutral-200: var(--nevysha-white);
|
|
--neutral-400: var(--nevysha-white);
|
|
--neutral-600: var(--nevysha-light-dark);
|
|
--neutral-700: var(--nevysha-light-dark);
|
|
--neutral-800: var(--nevysha-light-dark);
|
|
--neutral-900: var(--nevysha-light-dark);
|
|
--neutral-950: var(--nevysha-light-dark);
|
|
|
|
--link-text-color-hover: var(--ae-primary-color);
|
|
|
|
--ae-slider-bg-overlay: repeating-linear-gradient( 90deg, transparent, transparent max(3px, calc(0.671141% - 2px)), var(--ae-input-border-color) max(3px, calc(0.671141% - 2px)), var(--ae-input-border-color) max(4px, calc(0.671141% + 0px)) );
|
|
--ae-subgroup-input-bg-color: hsl(225deg 6% 13%);
|
|
--ae-input-border-color: hsl(0deg 0% 84.25%);
|
|
--ae-input-color: hsl(0, 0%, 0%);
|
|
--ae-input-bg-color: hsl(0, 0%, 100%);
|
|
--button-secondary-background-fill: var(--nevysha-dark);
|
|
--block-label-background-fill: var(--background-fill-secondary);
|
|
--checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
|
|
|
|
--vertical-line-bg-color: #18181859;
|
|
--checkbox-background-color: var(--nevysha-dark);
|
|
--checkbox-background-color-focus: var(--checkbox-background-color);
|
|
--checkbox-label-background-fill: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
|
|
--checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
|
|
--checkbox-label-text-color: var(--body-text-color);
|
|
--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
|
|
--background-fill-secondary: var(--neutral-900);
|
|
--panel-background-fill: var(--background-fill-secondary);
|
|
--body-text-color-subdued: var(--nevysha-font-color-subdued);
|
|
--block-label-text-color: var(--neutral-200);
|
|
--button-secondary-text-color: var(--nevysha-white);
|
|
--button-secondary-text-color-hover: var(--button-secondary-text-color);
|
|
--checkbox-border-color-hover: var(--ae-primary-color);
|
|
--checkbox-background-color-hover: var(--nevysha-dark);
|
|
--button-secondary-background-fill-hover: var(--ae-primary-color);
|
|
|
|
--body-background-fill: rgba(255, 255, 255, 0) !important;
|
|
--tab-nav-background-color: var(--nevysha-light-dark);
|
|
--tab-nav-background-color-selected: var(--nevysha-dark);
|
|
--border-color-primary: #acacac;
|
|
--input-border-color: #acacac;
|
|
--block-border-color: var(--border-color-primary);
|
|
--input-border-color-focus: var(--ae-primary-color);
|
|
|
|
--ae-panel-border-radius: 0px;
|
|
--tabnav-button-color: var(--nevysha-white);
|
|
|
|
--input-background-fill: var(--nevysha-dark);
|
|
--body-text-color: var(--neutral-100);
|
|
--tabmenu-button-color: var(--nevysha-white);
|
|
--background-fill-primary: var(--nevysha-light-dark);
|
|
/*--border-color-primary: var(--neutral-700);*/
|
|
--block-background-fill: var(--neutral-800);
|
|
--secondary-text-color: var(--nevysha-white);
|
|
--block-title-text-color: var(--nevysha-font-color);
|
|
--main-tabs-background-color: #e5e5e585;
|
|
}
|
|
|
|
/*css trick for perf ?*/
|
|
#kofi_nevysha_support {
|
|
transform: rotateZ(360deg);
|
|
}
|
|
|
|
.gradio-button.secondary-down:hover {
|
|
background: var(--button-secondary-background-fill-hover);
|
|
color: var(--button-secondary-text-color-hover);
|
|
}
|
|
.gradio-dropdown ul.options li.item.selected {
|
|
background-color: var(--ae-primary-color) !important;
|
|
}
|
|
.gradio-dropdown ul.options li.item:hover {
|
|
background-color: var(--color-accent);
|
|
}
|
|
.progressDiv .progress{
|
|
background: var(--ae-primary-color) !important;;
|
|
}
|
|
/* Show the up/down arrows of number inputs */
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
margin: 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* Set up arrow */
|
|
input[type="number"]::-webkit-inner-spin-button::before {
|
|
content: '\25b2';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 50%;
|
|
text-align: center;
|
|
color: red;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Set down arrow */
|
|
input[type="number"]::-webkit-inner-spin-button::after {
|
|
content: '\25bc';
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
text-align: center;
|
|
color: red;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.gradio-accordion {
|
|
background-color: var(--nevysha-light-dark) !important;
|
|
border-left: none !important;
|
|
border-bottom: none !important;
|
|
border-right: none !important;
|
|
border-radius: 3px !important;
|
|
color: var(--secondary-text-color) !important;
|
|
margin: 6px 0 !important;
|
|
}
|
|
|
|
.gradio-slider input[type=range] {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.gradio-container.app {
|
|
padding: 2px !important;
|
|
transform: rotateZ(360deg)
|
|
}
|
|
|
|
input[type=range] {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
-webkit-appearance: none;
|
|
background-color: var(--ae-input-bg-color);
|
|
border: 1px solid var(--ae-input-border-color);
|
|
position:relative;
|
|
accent-color: var(--ae-primary-color) !important;
|
|
}
|
|
input[type=range]::after {
|
|
content: '';
|
|
position: absolute;
|
|
height: 13px;
|
|
background-image: var(--ae-slider-bg-overlay);
|
|
opacity: 0.15;
|
|
width: 100%;
|
|
}
|
|
input[type=range]::-webkit-slider-runnable-track {
|
|
height: 14px;
|
|
-webkit-appearance: none;
|
|
color: var(--ae-primary-color);
|
|
margin-top: -1px;
|
|
}
|
|
input[type=range]::-moz-range-thumb,
|
|
input[type=range]::-webkit-slider-thumb {
|
|
color: var(--ae-primary-color);
|
|
border-radius: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
.nevysha.nevysha-tabnav {
|
|
display: flex;
|
|
position: fixed;
|
|
z-index: 2;
|
|
flex-direction: column;
|
|
width: 175px;
|
|
background-color: var(--tab-nav-background-color);
|
|
border-bottom: none !important;
|
|
}
|
|
.nevysha.nevysha-tabnav.center-menu-items {
|
|
justify-content: center;
|
|
}
|
|
.nevysha.nevysha-tabnav.center-menu-items > button:nth-child(1) {
|
|
margin-left:auto;
|
|
}
|
|
.nevysha.nevysha-tabnav > .selected {
|
|
background-color: var(--tab-nav-background-color-selected) !important;
|
|
border-top: 2px solid var(--ae-primary-color);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.nevysha.nevysha-tabnav > button {
|
|
color: var(--tabmenu-button-color);
|
|
}
|
|
|
|
#quicksettings_gap {
|
|
display: none;
|
|
}
|
|
#quicksettings_gap.nevysha-quicksettings-gap {
|
|
display:block;
|
|
flex: 1;
|
|
max-width: none;
|
|
}
|
|
|
|
#tabs > .nevysha.tabitem {
|
|
margin-left: calc(var(--nevysha-margin-left) + 10px);
|
|
background-color: var(--main-tabs-background-color);
|
|
border: none;
|
|
border-radius: 0;
|
|
overflow-y: auto;
|
|
height: var(--main-container-height);
|
|
padding: 0 10px !important;
|
|
}
|
|
#tabs > .nevysha.tabitem::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
#tabs > .nevysha.tabitem::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
#tabs > .nevysha.tabitem::-webkit-scrollbar-thumb {
|
|
background-color: var(--ae-primary-color);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.nevysha.btn {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: var(--button-transition);
|
|
padding: var(--size-0-5) var(--size-2);
|
|
text-align: center;
|
|
|
|
border: var(--button-border-width) solid var(--button-primary-border-color);
|
|
background: var(--button-primary-background-fill);
|
|
color: var(--button-primary-text-color);
|
|
|
|
border-radius: var(--button-large-radius);
|
|
padding: var(--button-large-padding);
|
|
font-size: var(--button-large-text-size);
|
|
|
|
--checkbox-background-color: var(--neutral-800);
|
|
}
|
|
|
|
.nevysha.btn.refresh {
|
|
width: 50px;
|
|
max-width: 50px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
height: 50px;
|
|
background-color: var(--nevysha-dark);
|
|
display: none;
|
|
}
|
|
|
|
.block.padded:not(.gradio-accordion) {
|
|
padding: 10px !important;
|
|
}
|
|
.block.padded:not(.gradio-accordion) {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.nevysha.settings-child {
|
|
background-color: var(--nevysha-light-dark) !important;
|
|
/*padding: 10px !important;*/
|
|
}
|
|
|
|
.gradio-button.tool {
|
|
border-radius: 0 !important;
|
|
border: none !important;
|
|
}
|
|
|
|
#quicksettings {
|
|
width: auto;
|
|
align-items: stretch;
|
|
gap: 20px;
|
|
}
|
|
#quicksettings > .block.gradio-slider {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-content: space-between;
|
|
}
|
|
|
|
#quicksettings > div.block {
|
|
padding: 0 !important;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-content: space-between;
|
|
}
|
|
|
|
#quicksettings > div.block > * {
|
|
width: 100%;
|
|
}
|
|
#quicksettings > div.block > input[type="range"] {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
#quicksettings > .gradio-button.tool {
|
|
height: 38px;
|
|
margin-left: -20px;
|
|
}
|
|
#quicksettings.centered-quicksettings {
|
|
justify-content: center !important;
|
|
}
|
|
|
|
#footer {
|
|
text-align: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
#footer > div {
|
|
display: flex;
|
|
position: fixed;
|
|
left: 10px;
|
|
bottom: 2px;
|
|
}
|
|
#footer .versions {
|
|
font-size: 85% !important;
|
|
opacity: 0.85 !important;
|
|
/* margin-left: auto; */
|
|
position: fixed !important;
|
|
right: 10px !important;
|
|
left: auto !important;
|
|
bottom: 2px;
|
|
}
|
|
|
|
.nevysha.svg-icon {
|
|
height: 20px;
|
|
fill: var(--nevysha-icon-fill);
|
|
margin: 3px 0 3px 0;
|
|
}
|
|
|
|
.nevysha.svg-icon.rotate {
|
|
transform: rotate(315deg);
|
|
}
|
|
|
|
/*footer text*/
|
|
/*#footer > div {*/
|
|
/* color: var(--footer-text-color);*/
|
|
/*}*/
|
|
/*!*versions*!*/
|
|
/*#footer > div.versions > span {*/
|
|
/* color: var(--footer-text-color);*/
|
|
/*}*/
|
|
|
|
.token-remove > svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: var(--neutral-50);
|
|
}
|
|
|
|
/*hiding scrollbar*/
|
|
html {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
body, #nevysha-loading {
|
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
overflow: auto;
|
|
background: linear-gradient(330deg, var(--nevysha-gradiant-1) 3%, var(--nevysha-gradiant-2) 38%);
|
|
animation: gradient 35s ease infinite;
|
|
background-size: 400% 400%;
|
|
background-attachment: fixed;
|
|
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 0%;
|
|
}
|
|
50% {
|
|
background-position: 75% 75%;
|
|
}
|
|
100% {
|
|
background-position: 0% 0%;
|
|
}
|
|
}
|
|
|
|
.wave {
|
|
background: rgb(94 26 145 / 16%);
|
|
border-radius: 1000% 1000% 0 0;
|
|
position: fixed;
|
|
width: 200%;
|
|
height: 3.5em;
|
|
animation: wave 10s -3s linear infinite;
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 0.8;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
}
|
|
|
|
.wave:nth-of-type(2) {
|
|
bottom: -1.25em;
|
|
animation: wave 18s linear reverse infinite;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.wave:nth-of-type(3) {
|
|
bottom: -2.5em;
|
|
animation: wave 20s -1s reverse infinite;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
@keyframes wave {
|
|
2% {
|
|
transform: translateX(1);
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(-25%);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(-25%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(1);
|
|
}
|
|
}
|
|
|
|
.block {
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.block.padded:not(.gradio-accordion) {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.block.token-counter span {
|
|
background: var(--nevysha-dark) !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.gradio-group {
|
|
margin-top: 10px !important;
|
|
}
|
|
|
|
button.secondary, button.primary {
|
|
border: 1px solid var(--ae-input-border-color) !important;
|
|
border-radius: var(--ae-panel-border-radius) !important;
|
|
background: var(--ae-input-bg-color) !important;
|
|
color: var(--ae-input-color) !important;
|
|
}
|
|
|
|
/*txt2img tweaks*/
|
|
|
|
.nevysha.generate-button, .nevysha.skip-interrupt-wrapper {
|
|
/*margin: 0 0 10px 0;*/
|
|
width: calc(100% - 10px);
|
|
}
|
|
|
|
.nevysha.skip-interrupt-wrapper {
|
|
display: flex !important;
|
|
flex-direction: row;
|
|
}
|
|
.nevysha.skip-interrupt-wrapper > button {
|
|
position: relative;
|
|
}
|
|
|
|
.nevysha.settings-wrapper {
|
|
flex: 1;
|
|
margin-top: 5px;
|
|
overflow-y: scroll;
|
|
padding: 0 5px 15px 0;
|
|
}
|
|
.nevysha.settings-wrapper::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.nevysha.settings-wrapper::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nevysha.settings-wrapper::-webkit-scrollbar-thumb {
|
|
background-color: var(--ae-primary-color);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.nevysha.txt2img_toprow-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#txt2img_settings, #img2img_settings {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
}
|
|
#txt2img_script_container, #img2img_script_container {
|
|
padding: 0 !important;
|
|
}
|
|
#txt2img_tools, #img2img_tools {
|
|
gap: 0;
|
|
}
|
|
|
|
#txt2img_tools > .form, #img2img_tools > .form {
|
|
gap: 0;
|
|
justify-content: space-between;
|
|
}
|
|
#txt2img_toprow, #img2img_toprow {
|
|
background-color: var(--nevysha-light-dark) !important;
|
|
padding: 10px !important;
|
|
margin-bottom: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#txt2img_script_container, #img2img_script_container {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
#tab_txt2img > div,
|
|
#tab_img2img > div, #tab_img2img > div > div {
|
|
height: 100%;
|
|
}
|
|
.settings-gradio-parent {
|
|
height: 100%;
|
|
padding: 10px 0 0 0;
|
|
}
|
|
#txt2img_results, #img2img_results {
|
|
height: 100%;
|
|
}
|
|
#txt2img_gallery_container, #img2img_gallery_container {
|
|
flex: 1;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.nevysha.nevysha-scrollable::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.nevysha.nevysha-scrollable::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.nevysha.nevysha-scrollable::-webkit-scrollbar-thumb {
|
|
background-color: var(--ae-primary-color);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.nevysha.nevysha-scrollable > div > div:nth-child(2) {
|
|
overflow-y: visible;
|
|
}
|
|
|
|
#txt2img_gallery, #img2img_gallery {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#txt2img_gallery > div:nth-child(2), #img2img_gallery > div:nth-child(2) {
|
|
flex: 1;
|
|
min-height: auto !important;
|
|
max-height: none !important;
|
|
}
|
|
#txt2img_settings,
|
|
#img2img_settings,
|
|
#txt2img_results,
|
|
#img2img_results{
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#txt2img_settings, #img2img_settings {
|
|
flex-basis: 50%;
|
|
}
|
|
|
|
#txt2img_results, #img2img_results {
|
|
flex-basis: 50%;
|
|
}
|
|
|
|
#txt2img_seed_row, #img2img_seed_row {
|
|
display: flex;
|
|
align-content: center;
|
|
align-items: center;
|
|
}
|
|
#txt2img_seed_row > button, #img2img_seed_row > button {
|
|
align-self: auto;
|
|
}
|
|
|
|
|
|
/*image browser*/
|
|
#image_browser_tabs_container > :not(:nth-child(-n+2)) {
|
|
background-color: var(--nevysha-light-dark) !important;
|
|
}
|
|
|
|
#tab_settings {
|
|
background-color: var(--nevysha-light-dark) !important;
|
|
}
|
|
|
|
|
|
/*img2im*/
|
|
#img2img_settings .tabs > :not(:first-child) {
|
|
background-color: var(--nevysha-light-dark) !important;
|
|
}
|
|
|
|
|
|
/*draggable*/
|
|
.nevysha.resizable-children-container {
|
|
flex-wrap: nowrap;
|
|
width: calc(100% - 33px) !important;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.vertical-line-wrapper {
|
|
width: 10px !important;
|
|
max-width: 10px !important;
|
|
min-width: 10px !important;
|
|
/*height: calc(100% - 30px);*/
|
|
cursor: ew-resize;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 15px -10px 0 -10px;
|
|
|
|
z-index: 999;
|
|
}
|
|
|
|
.slide-right-browser-panel > .vertical-line-wrapper {
|
|
/*position: absolute;*/
|
|
}
|
|
|
|
.slide-right-browser-panel > .slide-right-browser-panel-container {
|
|
flex: 1;
|
|
padding: 10px;
|
|
margin-left: 15px;
|
|
}
|
|
#cozy-img-browser_panel {
|
|
border: 1px solid var(--ae-input-border-color) !important;
|
|
}
|
|
|
|
.vertical-line {
|
|
width: 2px !important;
|
|
max-width: 2px !important;
|
|
min-width: 2px !important;
|
|
height: 100%;
|
|
cursor: ew-resize;
|
|
background-image: linear-gradient(to bottom, var(--vertical-line-bg-color) 7px, transparent 0);
|
|
background-size: 100% 13px;
|
|
}
|
|
|
|
.gradio-image {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
#img2maskimg {
|
|
|
|
}
|
|
#expendBtn {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 35px;
|
|
z-index: 99999;
|
|
}
|
|
|
|
#img2maskimg > div:nth-child(3) > div > div {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
canvas.nevysha {
|
|
inset: auto;
|
|
}
|
|
|
|
.brush > input[type="range"] {
|
|
min-width: 200px;
|
|
}
|
|
.block.gradio-checkbox {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
|
|
.nevysha-accent {
|
|
background-color: var(--ae-primary-color) !important;
|
|
}
|
|
|
|
.slide-right-browser-panel > .vertical-line-wrapper {
|
|
z-index: 100;
|
|
margin: 15px 0 0 5px;
|
|
}
|
|
|
|
.nevysha-right-button-wrapper {
|
|
position: fixed;
|
|
right: 0;
|
|
top: calc(75px + var(--menu-top-height));
|
|
z-index: 999;
|
|
height: calc(100vh - (100px + var(--menu-top-height)));
|
|
width: 25px;
|
|
min-width: 25px !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.nevysha-right-button-wrapper > button {
|
|
flex: 1;
|
|
min-height: auto !important;
|
|
max-height: none !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
.nevysha-right-button-wrapper > button > div, .nevysha-extra-network-floating-btn > div {
|
|
/*write the text vertically*/
|
|
writing-mode: vertical-rl;
|
|
width: 25px;
|
|
min-width: 25px !important;
|
|
}
|
|
|
|
.nevysha-extra-network-floating-btn {
|
|
height: 100px;
|
|
position: absolute;
|
|
top: calc(50% - 50px);
|
|
}
|
|
.extra-network-cards {
|
|
overflow-x: hidden;
|
|
}
|
|
.extra-network-cards > .card {
|
|
width: var(--extra-network-card-width);
|
|
height: var(--extra-network-card-height);
|
|
}
|
|
.extra-network-cards .card .actions .name {
|
|
font-size: var(--nevysha-text-md);
|
|
line-break: normal;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.slide-right-browser-panel {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
background-color: var(--block-background-fill) !important;
|
|
width: 75vw;
|
|
right: 0;
|
|
height: calc(100% - (95px + var(--menu-top-height)));
|
|
top: calc(75px + var(--menu-top-height));
|
|
padding-right: 15px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid #3f3f3f;
|
|
}
|
|
.nevysha-light .slide-right-browser-panel {
|
|
border: 1px solid var(--ae-input-border-color);
|
|
}
|
|
.extra-network-subdirs {
|
|
overflow: scroll;
|
|
}
|
|
|
|
|
|
[id$="_subdirs"] {
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
[id$="cards_html"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
align-items: stretch;
|
|
overflow: auto;
|
|
}
|
|
[id$="cards_html"]::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
[id$="cards_html"]::-webkit-scrollbar-thumb {
|
|
background-color: var(--ae-primary-color);
|
|
border-radius: 20px;
|
|
}
|
|
[id$="cards_html"]::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
[id$="_cards"] {
|
|
height: auto;
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
input[type="number"] {
|
|
width: 100px;
|
|
}
|
|
|
|
#settings_nevyui {
|
|
|
|
}
|
|
#nevyui-ui-block > * {
|
|
|
|
}
|
|
.nevysha.settings-nevyui-title {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.nevysha.settings-nevyui-title > h2 {
|
|
font-size: 1.8em;
|
|
color: var(--ae-primary-color);
|
|
font-family: 'Caveat Variable', sans-serif;
|
|
}
|
|
.nevysha.settings-nevyui-title > .subtitle {
|
|
font-size: 10px;
|
|
font-style: italic;
|
|
}
|
|
.nevysha.settings-nevyui-top > .info {
|
|
color: var(--body-text-color);
|
|
margin-bottom: 5px;
|
|
font-style: italic;
|
|
}
|
|
.nevysha-reporting {
|
|
color: var(--body-text-color) !important;
|
|
margin: 15px 0 15px 0 !important;
|
|
border-left: 4px solid var(--ae-primary-color);
|
|
padding-left: 5px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.nevysha.settings-nevyui-top > .nevysha-reporting > a {
|
|
color: var(--ae-primary-color);
|
|
text-decoration: underline;
|
|
}
|
|
#cozy_nest_settings_tabs .block {
|
|
background-color: transparent;
|
|
}
|
|
.nevysha-emphasis {
|
|
margin-top: 5px;
|
|
font-weight: bold;
|
|
background-color: var(--ae-primary-color);
|
|
color: var(--nevysha-color-from-luminance) !important;
|
|
padding: 8px;
|
|
border-radius: 2px;
|
|
}
|
|
.nevysha-tabnav.nevysha-tabnav-settings > h2{
|
|
font-size: 1.6em;
|
|
margin-top: 20px;
|
|
}
|
|
#nevyui_update_info_panel > article {
|
|
border-left: 4px solid var(--ae-primary-color);
|
|
padding-left: 15px;
|
|
margin-left: 5px;
|
|
}
|
|
#nevysha-version-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.nevysha-version-info-text{
|
|
flex: 1;
|
|
margin-left: 10px !important;
|
|
}
|
|
|
|
.nevysha.settings-nevyui-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
.nevysha.settings-nevyui-bottom > p {
|
|
font-size: 0.8em;
|
|
color: var(--body-text-color);
|
|
}
|
|
#cozy_nest_settings_tabs {
|
|
background-color: var(--tab-nav-background-color-selected);
|
|
}
|
|
#cozy_nest_settings_tabs > .tabitem {
|
|
overflow-y: auto;
|
|
height: 520px;
|
|
}
|
|
#cozy_nest_settings_tabs > .tab-nav {
|
|
background-color: var(--tab-nav-background-color);
|
|
}
|
|
.tab-nav > * {
|
|
border-radius: 0;
|
|
}
|
|
#cozy_nest_settings_tabs > .tab-nav > .selected {
|
|
background-color: var(--tab-nav-background-color-selected) !important;
|
|
border-top: 2px solid var(--ae-primary-color);
|
|
}
|
|
[id$="_extra_tabs"] {
|
|
background-color: var(--tab-nav-background-color-selected);
|
|
}
|
|
[id$="_extra_tabs"] > .tabitem {
|
|
background-color: var(--tab-nav-background-color-selected) !important;
|
|
}
|
|
[id$="_extra_tabs"] > .tab-nav {
|
|
background-color: var(--tab-nav-background-color);
|
|
}
|
|
[id$="_extra_tabs"] > .tab-nav > .selected {
|
|
background-color: var(--tab-nav-background-color-selected) !important;
|
|
border-top: 2px solid var(--ae-primary-color);
|
|
}
|
|
|
|
.nevysha-draggable-anchor-icon {
|
|
cursor: pointer;
|
|
position: relative;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 60px;
|
|
height: 35px;
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
background: var(--ae-input-bg-color);
|
|
border: 1px solid var(--ae-input-border-color);
|
|
}
|
|
|
|
.nevysha-draggable-anchor-icon > svg {
|
|
height: 15px;
|
|
fill: var(--body-text-color);
|
|
}
|
|
|
|
.nevysha-draggable-anchor {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: pointer;
|
|
z-index: 9999;
|
|
width: 60px;
|
|
height: 35px;
|
|
}
|
|
|
|
#img_browser_main_block {
|
|
gap:0;
|
|
}
|
|
#img_browser_main_block .form {
|
|
align-items: center;
|
|
}
|
|
textarea.nevysha-image-browser-folder {
|
|
display: block;
|
|
position: relative;
|
|
outline: none!important;
|
|
box-shadow: var(--input-shadow);
|
|
border: var(--input-border-width) solid var(--input-border-color);
|
|
resize: none;
|
|
}
|
|
#cnib_output_folder > label > textarea {
|
|
display: none;
|
|
}
|
|
.nevysha-image-browser-folder-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.nevysha-image-browser-folder-btn {
|
|
border: 1px solid var(--ae-input-border-color) !important;
|
|
border-radius: var(--ae-panel-border-radius) !important;
|
|
background: var(--ae-input-bg-color) !important;
|
|
color: var(--ae-input-color) !important;
|
|
padding: 0 10px !important;
|
|
min-width: 60px;
|
|
}
|
|
|
|
|
|
/*fix menu to top*/
|
|
.nevysha.nevysha-tabnav.menu-fix-top{
|
|
position: fixed;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
top: 0;
|
|
}
|
|
.gradio-container.app {
|
|
z-index: 1;
|
|
height: 100vh !important;
|
|
}
|
|
.gradio-container.app.menu-fix-top {
|
|
padding-top: 0 !important;
|
|
padding-bottom: 20px !important;
|
|
}
|
|
|
|
#tab_nevyui > div {
|
|
height: 100%;
|
|
}
|
|
#nevyui-ui-wrapper {
|
|
background-color: var(--block-background-fill);
|
|
}
|
|
.nevysha-tab-settings {
|
|
position: fixed;
|
|
right: 5px;
|
|
top: 30px;
|
|
height: fit-content;
|
|
width: max(800px, 50vw);
|
|
z-index: 9999;
|
|
background-color: var(--block-background-fill);
|
|
border: 1px solid var(--ae-input-border-color)
|
|
}
|
|
.nevysha-btn-menu-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 15px 0;
|
|
}
|
|
.nevysha-btn-menu-wrapper.menu-fix-top {
|
|
position: relative;
|
|
right: 20px;
|
|
margin: 0 0 0 auto;
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: end;
|
|
}
|
|
.nevysha-btn-menu-wrapper > button > svg {
|
|
fill: var(--ae-primary-color);
|
|
width: 20px;
|
|
}
|
|
#nevysha-saved-feedback-wrapper {
|
|
height: 1px;
|
|
}
|
|
.nevysha-feedback {
|
|
margin: auto;
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-top: -15px !important;
|
|
color: var(--ae-primary-color) !important;
|
|
}
|
|
|
|
#nevyui_update_info_panel {
|
|
padding: 5px;
|
|
}
|
|
.markdown-body {
|
|
font-size: 1em;
|
|
color: var(--body-text-color);
|
|
line-height: 1.5;
|
|
font-weight: 400;
|
|
letter-spacing: 0.00938em;
|
|
word-wrap: break-word;
|
|
padding: 0 10px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
.markdown-body code {
|
|
font-family: monospace;
|
|
font-size: 0.9em;
|
|
background-color: var(--ae-input-bg-color);
|
|
color: var(--body-text-color);
|
|
padding: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
.markdown-body > h1 {
|
|
font-size: medium;
|
|
color: var(--body-text-color);
|
|
margin-top: 30px;
|
|
}
|
|
.markdown-body > h2 {
|
|
font-size: 1.4em;
|
|
color: var(--body-text-color);
|
|
margin-top: 30px;
|
|
}
|
|
.markdown-body > ul {
|
|
margin-left: 20px;
|
|
}
|
|
.markdown-body > ul > li > ul {
|
|
margin-left: 20px;
|
|
}
|
|
.markdown-body > ul > li {
|
|
margin-bottom: 10px;
|
|
}
|
|
.markdown-body em {
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
/*Style to apply when #nevysha_other_tabs is empty*/
|
|
#nevysha_other_tabs:empty {
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
#nevysha_other_tabs:empty::before {
|
|
content: "Drop tabs here to hide them";
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
color: var(--body-text-color);
|
|
font-size: 1.2em;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
|
|
#nevysha_other_tabs {
|
|
background-color: var(--block-background-fill);
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--ae-input-border-color);
|
|
}
|
|
|
|
#nevysha_other_tabs > button {
|
|
text-align: left;
|
|
}
|
|
.nevysha-other-tab-text {
|
|
padding: 3px 10px;
|
|
text-align: left;
|
|
}
|
|
.remove-nevysha-other-tab {
|
|
padding-right: 4px;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
/*LOADING*/
|
|
.nevysha-cozy-nest-app-name{
|
|
font-size: 4em;
|
|
margin-bottom: 30%;
|
|
/*color: #e378b2;*/
|
|
color: var(--ae-primary-color);
|
|
font-family: 'Caveat Variable', sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
#nevysha-loading > div.nevysha-loading-progress > div.subtext1 {
|
|
font-size: 1em;
|
|
color: var(--body-text-color);
|
|
opacity: 1;
|
|
margin-top: 30%;
|
|
}
|
|
#nevysha-loading > div.nevysha-loading-progress > div.subtext2 {
|
|
font-size: 0.8em;
|
|
color: var(--body-text-color);
|
|
opacity: 0.2;
|
|
}
|
|
#nevysha-loading-wrap {
|
|
background-color: var(--nevysha-gradiant-2);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 9000;
|
|
}
|
|
|
|
#nevysha-loading-wrap > #nevysha-loading > .footer {
|
|
position: fixed;
|
|
bottom: calc(3.5em + 25px);
|
|
right: 25px;
|
|
color: var(--body-text-color);
|
|
font-size: 0.7em;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
#nevysha-loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
z-index: 9001;
|
|
}
|
|
#loading_step_estimator {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.nevysha-loading-progress {
|
|
margin: auto;
|
|
color: var(--ae-primary-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.lds-roller {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.lds-roller div {
|
|
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
transform-origin: 40px 40px;
|
|
}
|
|
.lds-roller div:after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--ae-primary-color);
|
|
margin: -4px 0 0 -4px;
|
|
}
|
|
.lds-roller div:nth-child(1) {
|
|
animation-delay: -0.036s;
|
|
}
|
|
.lds-roller div:nth-child(1):after {
|
|
top: 63px;
|
|
left: 63px;
|
|
}
|
|
.lds-roller div:nth-child(2) {
|
|
animation-delay: -0.072s;
|
|
}
|
|
.lds-roller div:nth-child(2):after {
|
|
top: 68px;
|
|
left: 56px;
|
|
}
|
|
.lds-roller div:nth-child(3) {
|
|
animation-delay: -0.108s;
|
|
}
|
|
.lds-roller div:nth-child(3):after {
|
|
top: 71px;
|
|
left: 48px;
|
|
}
|
|
.lds-roller div:nth-child(4) {
|
|
animation-delay: -0.144s;
|
|
}
|
|
.lds-roller div:nth-child(4):after {
|
|
top: 72px;
|
|
left: 40px;
|
|
}
|
|
.lds-roller div:nth-child(5) {
|
|
animation-delay: -0.18s;
|
|
}
|
|
.lds-roller div:nth-child(5):after {
|
|
top: 71px;
|
|
left: 32px;
|
|
}
|
|
.lds-roller div:nth-child(6) {
|
|
animation-delay: -0.216s;
|
|
}
|
|
.lds-roller div:nth-child(6):after {
|
|
top: 68px;
|
|
left: 24px;
|
|
}
|
|
.lds-roller div:nth-child(7) {
|
|
animation-delay: -0.252s;
|
|
}
|
|
.lds-roller div:nth-child(7):after {
|
|
top: 63px;
|
|
left: 17px;
|
|
}
|
|
.lds-roller div:nth-child(8) {
|
|
animation-delay: -0.288s;
|
|
}
|
|
.lds-roller div:nth-child(8):after {
|
|
top: 56px;
|
|
left: 12px;
|
|
}
|
|
@keyframes lds-roller {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.lds-ellipsis {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.lds-ellipsis div {
|
|
position: absolute;
|
|
top: 33px;
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
background: var(--ae-primary-color);
|
|
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
}
|
|
.lds-ellipsis div:nth-child(1) {
|
|
left: 8px;
|
|
animation: lds-ellipsis1 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(2) {
|
|
left: 8px;
|
|
animation: lds-ellipsis2 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(3) {
|
|
left: 32px;
|
|
animation: lds-ellipsis2 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(4) {
|
|
left: 56px;
|
|
animation: lds-ellipsis3 0.6s infinite;
|
|
}
|
|
@keyframes lds-ellipsis1 {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes lds-ellipsis3 {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
@keyframes lds-ellipsis2 {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
100% {
|
|
transform: translate(24px, 0);
|
|
}
|
|
}
|
|
|
|
|
|
#kofi_nevysha_support > img {
|
|
height: 15px !important;
|
|
}
|
|
.nevysha-kofi-tab {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
/*quickfix*/
|
|
.livePreview {
|
|
background-color: var(--background-fill-primary) !important;
|
|
}
|
|
|
|
:root {
|
|
--error-handler-white: #eeeeee;
|
|
}
|
|
#dialog-message-wrap, #cozy-alert-wrap {
|
|
font-size: 12px;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
top: 0;
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
/* align-content: stretch; */
|
|
justify-content: center;
|
|
}
|
|
#dialog-message {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
margin: 50px;
|
|
background-color: var(--nevysha-gradiant-2);
|
|
}
|
|
#dialog-message > .header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
#dialog-message > .header > h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
#cozy-alert-wrap > div {
|
|
height: fit-content;
|
|
width: auto;
|
|
margin: auto;
|
|
background-color: var(--nevysha-gradiant-2);
|
|
padding: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--ae-input-border-color);
|
|
color: var(--nevysha-font-color);
|
|
}
|
|
#cozy-alert-wrap > div > .header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: row;
|
|
}
|
|
#cozy-alert-title {
|
|
font-size: 1.5em;
|
|
margin: 0 auto;
|
|
}
|
|
#cozy-alert-close {
|
|
margin: auto;
|
|
}
|
|
.ui-dialog-title {
|
|
color: var(--error-handler-white);
|
|
}
|
|
#cozy_nest_error_handling_display {
|
|
color: var(--error-handler-white);
|
|
}
|
|
#cozy_nest_error_handling_display_stack {
|
|
color: red;
|
|
font-weight: bold;
|
|
font-family: monospace;
|
|
white-space: pre-wrap;
|
|
background-color: #222222;
|
|
padding: 25px;
|
|
border-radius: 3px;
|
|
border-color: red;
|
|
}
|
|
#cozynest-error-extentions > table > tbody > tr > td > a {
|
|
color: var(--error-handler-white);
|
|
font-style: italic;
|
|
}
|
|
#dialog-message > fieldset {
|
|
color: var(--error-handler-white);
|
|
margin-bottom: 40px;
|
|
}
|
|
#dialog-message > fieldset.extensions-list {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
#cozynest-error-instance-info > a {
|
|
color: cyan !important;
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
.cozynest-error-tips {
|
|
font-weight: bold;
|
|
color: var(--error-handler-white);
|
|
background-color: #d57411;
|
|
padding: 10px;
|
|
font-size: 15px;
|
|
}
|
|
.cozynest-error-tips > a {
|
|
color: cyan;
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
.ui-dialog {
|
|
background-color: #101010;
|
|
border: none;
|
|
}
|
|
.ui-dialog-titlebar, .ui-dialog-buttonpane {
|
|
background-color: black;
|
|
border: none;
|
|
color: var(--error-handler-white);
|
|
}
|
|
.ui-button {
|
|
background-color: #222222;
|
|
border: none;
|
|
color: var(--error-handler-white);
|
|
}
|
|
.ui-button:hover, .ui-widget.ui-widget-content {
|
|
border: none;
|
|
}
|
|
|
|
/*Image Browser*/
|
|
.blocInfo, textarea {
|
|
display: block;
|
|
position: relative;
|
|
outline: none!important;
|
|
box-shadow: var(--input-shadow);
|
|
border: var(--input-border-width) solid var(--input-border-color);
|
|
border-color: var(--input-border-color)!important;
|
|
border-radius: var(--input-radius)!important;
|
|
background: var(--input-background-fill)!important;
|
|
background-color: var(--input-background-fill)!important;
|
|
width: 100%;
|
|
color: var(--body-text-color)!important;
|
|
font-weight: var(--input-text-weight)!important;
|
|
font-size: var(--input-text-size)!important;
|
|
line-height: var(--line-sm)!important;
|
|
font-family: monospace!important;
|
|
}
|
|
|
|
/*Fix for generation info size*/
|
|
|
|
.infotext {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
.infotext::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.infotext::-webkit-scrollbar-thumb {
|
|
background-color: var(--ae-primary-color);
|
|
border-radius: 20px;
|
|
}
|
|
.infotext::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
ul.options {
|
|
overflow-y: auto;
|
|
z-index: 303;
|
|
border: 1px solid var(--ae-input-border-color);
|
|
}
|
|
ul.options::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
ul.options::-webkit-scrollbar-track {
|
|
background-color: transparent;
|
|
}
|
|
|
|
ul.options::-webkit-scrollbar-thumb {
|
|
background-color: var(--ae-primary-color);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
button:hover {
|
|
filter: brightness(1.2) !important;
|
|
}
|
|
.nevysha-button:hover {
|
|
filter: brightness(1.2) !important;
|
|
}
|
|
body.nevysha-light button:hover {
|
|
filter: brightness(0.95) !important
|
|
}
|
|
body.nevysha-light .nevysha-button:hover {
|
|
filter: brightness(0.95) !important
|
|
}
|
|
|
|
.nevysha-enhanced-prompt-field {
|
|
padding: 10px !important;
|
|
}
|
|
.nevysha-enhanced-prompt-field > .prompt {
|
|
height: 289px;
|
|
display: block;
|
|
position: relative;
|
|
outline: none!important;
|
|
box-shadow: var(--input-shadow);
|
|
border: var(--input-border-width) solid var(--input-border-color);
|
|
border-radius: var(--input-radius);
|
|
background: var(--input-background-fill);
|
|
width: 100%;
|
|
color: var(--body-text-color)!important;
|
|
font-weight: var(--input-text-weight)!important;
|
|
font-size: var(--input-text-size)!important;
|
|
line-height: var(--line-sm)!important;
|
|
font-family: monospace!important;
|
|
overflow: auto;
|
|
min-height: 45px;
|
|
padding: 10px;
|
|
}
|
|
.nevysha-enhanced-prompt-field-bracket {
|
|
font-weight:bold;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
#kofi_nevysha_support, #kofi_nevysha_support_img {
|
|
display: none;
|
|
}
|
|
|
|
[id$="_gallery_clear_button"] {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 55px;
|
|
z-index: 30;
|
|
background-color: var(--block-background-fill);
|
|
}
|
|
[id$="_gallery_clear_button"] > svg {
|
|
height: 15px;
|
|
width: 15px;
|
|
fill: var(--body-text-color);
|
|
}
|
|
|
|
#nevyui_update_info_close_btn, #nevyui_update_btn {
|
|
width: 60px;
|
|
}
|
|
|
|
#cozynest_others_settings_header > p:nth-child(1) {
|
|
font-style: italic;
|
|
}
|
|
|
|
#nevysha_cozy_nest {
|
|
display: none;
|
|
}
|
|
|
|
body.nsfw img:not([id='kofi_nevysha_support_img']) {
|
|
filter: blur(20px);
|
|
}
|
|
body.nsfw .infoModal > .image-wrapper > img {
|
|
filter: blur(50px);
|
|
}
|
|
body.nsfw .card {
|
|
filter: blur(10px);
|
|
}
|
|
|
|
[id$="_actions_column"] {
|
|
gap: 0;
|
|
}
|
|
|
|
[id$="_toprow"] {
|
|
gap: 5px !important;
|
|
}
|
|
|
|
.gradio-accordion {
|
|
/*border-top: 1px solid var(--ae-input-border-color) !important;*/
|
|
border-left: 2px solid var(--block-background-fill) !important;
|
|
}
|
|
.nevysha-accordion-open {
|
|
border-top: 2px solid var(--secondary-accent-color) !important;
|
|
border-image: linear-gradient(to right, var(--secondary-accent-color) 100px, var(--block-background-fill) 70%) 1;
|
|
}
|
|
|
|
[id$="_script_container"] .gradio-accordion:before {
|
|
content: '' !important;
|
|
background-color: var(--ae-input-border-color) !important;
|
|
height: 1px !important;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
margin-top: -2px;
|
|
margin-left: -2px;
|
|
}
|
|
[id$="_script_container"] .nevysha-accordion-open.gradio-accordion:before {
|
|
margin-top: -3px;
|
|
}
|
|
|
|
[id$="_script_container"] .nevysha-accordion-open {
|
|
border-left: 2px solid var(--secondary-accent-color) !important;
|
|
}
|
|
[id$="_script_container"] .nevysha-accordion-open .nevysha-accordion-open {
|
|
border-top: 2px solid var(--secondary-accent-color) !important;
|
|
border-left: 2px solid var(--block-background-fill) !important;
|
|
border-image: none;
|
|
}
|
|
|
|
.gradio-accordion > .label-wrap.open {
|
|
color: var(--ae-primary-color) !important;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.nevysha-scripts {
|
|
border-left: 2px solid var(--secondary-accent-color) !important;
|
|
background-color: var(--background-fill-primary);
|
|
padding: 15px;
|
|
margin-top: -10px !important;
|
|
}
|
|
.nevysha-script-selected {
|
|
border-top: 2px solid var(--secondary-accent-color) !important;
|
|
border-left: 2px solid var(--secondary-accent-color) !important;
|
|
border-image: linear-gradient(to right, var(--secondary-accent-color) 100px, var(--block-background-fill) 70%) 1;
|
|
color: var(--ae-primary-color) !important;
|
|
}
|
|
|
|
.nevysha-script-selected label > span {
|
|
color: var(--ae-primary-color) !important;
|
|
margin-bottom: 20px;
|
|
}
|
|
.nevysha-script-selected input {
|
|
color: var(--ae-primary-color) !important;
|
|
}
|
|
[id$="_prompt_container"] {
|
|
gap: 1px !important;
|
|
}
|
|
|
|
.checkboxes-row, .gradio-group {
|
|
margin-bottom: 0 !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
.gradio-button.tool {
|
|
height: 3em;
|
|
}
|
|
|
|
.tab-nav > button.selected {
|
|
border-top: 2px solid var(--secondary-accent-color);
|
|
}
|
|
|
|
.nevysha.settings-wrapper > :not([id$="_toprow"]):not([id$="_script_container"]) {
|
|
padding: 5px 5px !important;
|
|
}
|
|
[id$="_container_aspect_ratio"] {
|
|
padding: 5px 5px !important;
|
|
}
|
|
[id$="_script_container"] > div {
|
|
background-color: var(--block-background-fill);
|
|
}
|
|
|
|
.nevysha-prompt-tools {
|
|
align-items: flex-end;
|
|
}
|
|
.nevysha-interrogate-btn {
|
|
max-width: 55px;
|
|
height: 38px;
|
|
width: 20px;
|
|
min-width: 75px !important;
|
|
}
|
|
button#interrogate {
|
|
margin: 0 3px 0 5px !important;
|
|
}
|
|
|
|
|
|
[id$="_styles_row"] {
|
|
margin-right: 5px;
|
|
}
|
|
[id$="_styles_row"] button {
|
|
padding: 0 !important;
|
|
}
|
|
[id$="_styles_row"] > div {
|
|
gap: 0 !important;
|
|
}
|
|
|
|
#script_list {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.nevysha.generate-button.accent {
|
|
background: var(--ae-primary-color) !important;
|
|
color: var(--nevysha-color-from-luminance) !important;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|