Mozilla Fixes for sliders and scrollbars

javascript/hints.js

@@ -21,6 +21,8 @@ titles = {
     "\u{1f4cb}": "Apply selected styles to current prompt",
     "\u{1f4d2}": "Paste available values into the field",
     "\u{1f3b4}": "Show extra networks",
+	"\u{1f5e8}": "Interogate Clip",
+	"\u{1f5ea}": "Interogate Deepbooru",
 
 
     "Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt",

modules/ui.py

@@ -863,14 +863,11 @@ def create_ui():
 
 
                         elif category == "cfg":
-
+                        
                             with gr.Row():                              
-                                cfg_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.5, label='CFG Scale', value=7.0, elem_id="img2img_cfg_scale")
-                                image_cfg_scale = gr.Slider(minimum=0, maximum=3.0, step=0.05, label='Image CFG Scale', value=1.5, elem_id="img2img_image_cfg_scale", visible=shared.sd_model and shared.sd_model.cond_stage_key == "edit")
-                                  
-                            with FormRow():  
+                                cfg_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.5, label='CFG Scale', value=7.0, elem_id="img2img_cfg_scale")                              
+                                image_cfg_scale = gr.Slider(minimum=0, maximum=3.0, step=0.05, label='Image CFG Scale', value=1.5, elem_id="img2img_image_cfg_scale", visible=shared.sd_model and shared.sd_model.cond_stage_key == "edit")                                     
                                 denoising_strength = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label='Denoising strength', value=0.75, elem_id="img2img_denoising_strength")
-                                    
 
                         elif category == "seed":                          
                             seed, reuse_seed, subseed, reuse_subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox = create_seed_inputs('img2img')

style.css

@@ -1218,6 +1218,7 @@ textarea {
     min-width: unset;
     max-width: unset;
     width: 37px;
+	flex-grow: unset;
 }
 
 #img2img_actions_column>button,
@@ -1751,6 +1752,7 @@ body {
     height: calc(100vh - 296px);
     overflow-y: auto !important;
     overflow-x: hidden;
+    padding-top: 0.5em;
 }
 
 #img2img_results,
@@ -1905,6 +1907,8 @@ input:focus {
     border-left: solid 8px transparent;
 }
 
+
+
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     input[type=range] {
         overflow: hidden;
@@ -1931,8 +1935,14 @@ input:focus {
     }
 }
 
+
+
+/* Firefox */
+
 input[type=range]::-moz-range-progress {
     background-color: #03d0a8;
+	height: 14px;
+	border: 1px solid #03d0a8;
 }
 
 input[type=range]::-moz-range-track {
@@ -1945,4 +1955,50 @@ input[type=range]::-ms-fill-lower {
 
 input[type=range]::-ms-fill-upper {
     background-color: #202124;
-}
+}
+
+
+#txt2img_results,
+#img2img_results,
+#img2img_settings_scroll,
+#txt2img_settings_scroll {
+  scrollbar-color: #292a2d #1a1a1a !important;
+  scrollbar-width: thin !important;
+}
+
+
+input[type=range]{
+    width: 100%;
+}
+
+input[type=range]::-moz-range-track {
+    width: 100%;
+    background: #202124;
+    border: none;
+    border-radius: 0px;
+}
+
+input[type=range]::-moz-range-thumb {
+    border: 1px solid #03d0a8;
+    width: 14px;
+    border-radius: 0%;
+    background: #03d0a8;
+}
+
+/*hide the outline behind the border*/
+input[type=range]:-moz-focusring{
+    outline: 1px solid #03d0a8;
+    outline-offset: -1px;
+}
+
+input[type=range]:focus::-moz-range-track {
+    background: #202124;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+input[type="number"]:hover,
+input[type="number"]:focus {
+    -moz-appearance: initial;
+}