diff --git a/README.md b/README.md index 71f5471..c247768 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,7 @@ JavaScript & accordion aspect ratios _might_ not play well together - I don't th Developed using existing [AUTOMATIC1111 webui](https://github.com/AUTOMATIC1111/stable-diffusion-webui) dependencies. -It's recommended to use the python version specified by A111 webui. +It's recommended to use the python version specified by A1111 webui. However - for running unit tests, we use pytest. diff --git a/aspect_ratio_helper/_components.py b/aspect_ratio_helper/_components.py index be6a139..5c17c8b 100644 --- a/aspect_ratio_helper/_components.py +++ b/aspect_ratio_helper/_components.py @@ -122,6 +122,7 @@ class PredefinedAspectRatioButtons(ArhUIComponent): ), gr.Row( variant='compact', visible=self.should_show(), + elem_classes='arh-btn-row', ): for ar_str in aspect_ratios: w, h, *_ = [abs(float(d)) for d in ar_str.split(':')] @@ -205,6 +206,7 @@ class PredefinedPercentageButtons(ArhUIComponent): ), gr.Row( variant='compact', visible=self.should_show(), + elem_classes='arh-btn-row', ): pps = _settings.safe_opt(_constants.ARH_PREDEFINED_PERCENTAGES_KEY) percentages = [abs(int(x)) for x in pps.split(',')] diff --git a/style.css b/style.css index 520d357..821f7cd 100644 --- a/style.css +++ b/style.css @@ -10,18 +10,23 @@ } #txt2img_ratio select, #img2img_ratio select { - -o-appearance: none; - -ms-appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-image: unset; - padding-right: unset; - min-width: 40px; - max-width: 40px; - min-height: 40px; - max-height: 40px; - line-height: 40px; - padding: 0; - text-align: center; + font-family: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif; + tab-size: 4; + color: white; + font-weight: 400; + font-size: 14px; + line-height: 1.4; + box-sizing: border-box; + position: relative; + border: 1px solid #374151; + border-radius: 8px; + background: #1f2937; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + padding-right: 1px; + margin-bottom: 10px; + padding-left: 2px; +} + +.arh-btn-row button { + min-width: fit-content; }