tweak theme and increse image sizes

javascript/black-teal.css

@@ -30,26 +30,28 @@
   --block-title-text-color: var(--neutral-300);
   --radius-sm: 2px;
   --radius-lg: 4px;
+  --line-xs: 1.0em;
   --line-sm: 1.2em;
   --line-md: 1.4em;
+  --line-lg: 1.5em;
 }
 
 html { font-size: var(--font-size); font-family: var(--font); }
 body, button, input, select, textarea { font-family: var(--font); }
-button { max-width: 400px; }
+button { max-width: 400px; white-space: nowrap; }
 img { background-color: var(--background-color); }
-input[type=range] { height: var(--line-sm) !important; appearance: none !important; margin-top: 0 !important; min-width: max(4em, 100%) !important;
+input[type=range] { height: var(--line-xs) !important; appearance: none !important; margin-top: 0 !important; min-width: max(4em, 100%) !important;
   background-color: var(--background-color) !important; width: 100% !important; background: transparent !important; }
-input[type=range]::-webkit-slider-runnable-track { width: 100% !important; height: var(--line-sm) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important;
+input[type=range]::-webkit-slider-runnable-track { width: 100% !important; height: var(--line-xs) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important;
   background: var(--input-background-fill) !important; border-radius: var(--radius-lg) !important; border: 0px solid #222222 !important; }
-input[type=range]::-moz-range-track { width: 100% !important; height: var(--line-sm) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important; background:
+input[type=range]::-moz-range-track { width: 100% !important; height: var(--line-xs) !important; cursor: pointer !important; box-shadow: 2px 2px 3px #111111 !important; background:
   var(--input-background-fill) !important; border-radius: var(--radius-lg) !important; border: 0px solid #222222 !important; }
-input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-sm) !important; width: var(--line-sm) !important;
+input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-xs) !important; width: var(--line-md) !important;
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
-input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-sm) !important; width: var(--line-sm) !important;
+input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111 !important; border: 0px solid #000000 !important; height: var(--line-xs) !important; width: var(--line-md) !important;
   border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: 0px !important; }
 ::-webkit-scrollbar { width: 12px; }
-::-webkit-scrollbar-track { background: #333333; }
+::-webkit-scrollbar-track { background: #303030; }
 ::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: var(--radius-lg); border-width: 0; box-shadow: 2px 2px 3px #111111; }
 div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; }
 
@@ -64,7 +66,7 @@ fieldset .gr-block.gr-box, label.block span { padding: 0; margin-top: -4px; }
 .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: #333333 !important; padding: 4px; margin: 4px; }
+.gr-input { background-color: #303030 !important; padding: 4px; margin: 4px; }
 .gr-input-label { color: lightyellow; border-width: 0; background: transparent; padding: 2px !important; }
 .gr-panel { background-color: var(--background-color); }
 .eta-bar { display: none !important }
@@ -103,7 +105,7 @@ svg.feather.feather-image, .feather .feather-image { display: none }
 #div.gradio-container { overflow-x: hidden; }
 #img2img_label_copy_to_img2img { font-weight: normal; }
 
-#txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt, #control_prompt, #control_neg_prompt { background-color: var(--background-color); box-shadow: 4px 4px 4px 0px #333333  !important; }
+#txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt, #control_prompt, #control_neg_prompt { background-color: var(--background-color); box-shadow: 4px 4px 4px 0px #303030  !important; }
 #txt2img_prompt > label > textarea, #txt2img_neg_prompt > label > textarea, #img2img_prompt > label > textarea, #img2img_neg_prompt > label > textarea, #control_prompt > label > textarea, #control_neg_prompt > label > textarea { font-size: 1.0em; line-height: 1.4em; }
 #txt2img_styles, #img2img_styles, #control_styles { padding: 0; }
 #txt2img_styles_refresh, #img2img_styles_refresh, #control_styles_refresh { padding: 0; margin-top: 1em; }
@@ -186,7 +188,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p
   --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600));
   --table-border-color: var(--neutral-700);
   --table-even-background-fill: #222222;
-  --table-odd-background-fill: #333333;
+  --table-odd-background-fill: #303030;
   --table-row-focus: var(--color-accent-soft);
   --button-border-width: var(--input-border-width);
   --button-cancel-background-fill: linear-gradient(to bottom right, #dc2626, #b91c1c);
@@ -223,7 +225,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p
   --neutral-500: #707070;
   --neutral-600: #606060;
   --neutral-700: #404040;
-  --neutral-800: #333333;
+  --neutral-800: #303030;
   --neutral-900: #111827;
   --neutral-950: #0b0f19;
   --radius-xxs: 0;
@@ -288,7 +290,7 @@ textarea[rows="1"] { height: 33px !important; width: 99% !important; padding: 8p
   --button-large-radius: var(--radius-lg);
   --button-large-text-size: var(--text-lg);
   --button-large-text-weight: 400;
-  --button-shadow: 4px 4px 4px 0px #333333;
+  --button-shadow: 4px 4px 4px 0px #303030;
   --button-shadow-active: 1px 1px 4px 0px #555555;
   --button-shadow-hover: 1px 1px 4px 0px #555555;
   --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));

javascript/sdnext.css

@@ -2,7 +2,7 @@
 :root { --left-column: 500px; }
 a { font-weight: bold; cursor: pointer; }
 h2 { margin-top: 1em !important; font-size: var(--text-xxl) !important; }
-footer { display: none; }
+footer { display: none; margin-top: 0 !important;}
 table { overflow-x: auto !important; overflow-y: auto !important; }
 td { border-bottom: none !important; padding: 0.1em 0.5em !important; }
 tr { border-bottom: none !important; padding: 0.1em 0.5em !important; }
@@ -73,7 +73,10 @@ button.custom-button{ border-radius: var(--button-large-radius); padding: var(--
 .performance p { display: inline-block; color: var(--body-text-color-subdued) !important }
 .performance .time { margin-right: 0; }
 .thumbnails { background: var(--body-background-fill); }
-#control_gallery { height: 564px; }
+.control-image { height: calc(100vw/3) !important; }
+#control_results { margin: 0; padding: 0; }
+#control_gallery { height: calc(100vw/3 + 60px); }
+#txt2img_gallery, #img2img_gallery { height: 50vh; }
 #control-result { padding: 0.5em; }
 #control-inputs { margin-top: 1em; }
 #txt2img_prompt_container, #img2img_prompt_container, #control_prompt_container { margin-right: var(--layout-gap) }
@@ -85,10 +88,10 @@ button.custom-button{ border-radius: var(--button-large-radius); padding: var(--
 #txt2img_generate_line2>button, #img2img_generate_line2>button, #extras_generate_box>button, #control_generate_line2>button, #txt2img_tools>button, #img2img_tools>button, #control_tools>button { height: 2em; line-height: 0; font-size: var(--text-md);
   min-width: unset; display: block !important; }
 #txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt, #control_prompt, #control_neg_prompt { display: contents; }
-#txt2img_generate_box, #img2img_generate_box { min-width: unset; width: 48%; }
+#txt2img_generate_box, #img2img_generate_box { min-width: unset; width: 66%; }
 #control_generate_box { min-width: unset; width: 100%; }
 #txt2img_actions_column, #img2img_actions_column, #control_actions { flex-flow: wrap; justify-content: space-between; }
-#txt2img_enqueue_wrapper, #img2img_enqueue_wrapper, #control_enqueue_wrapper { min-width: unset !important; width: 48%; }
+#txt2img_enqueue_wrapper, #img2img_enqueue_wrapper, #control_enqueue_wrapper { min-width: unset !important; width: 32%; }
 .interrogate-clip { position: absolute; right: 3em; top: -2.7em; max-width: fit-content; }
 .interrogate-blip { position: absolute; right: 1em; top: -2.7em; max-width: fit-content; }
 .interrogate-col{ min-width: 0 !important; max-width: fit-content; margin-right: var(--spacing-xxl); }