diff --git a/css/style.css b/css/style.css index 3cc1e5e..c702a72 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,136 @@ /* based on https://github.com/AUTOMATIC1111/stable-diffusion-webui/blob/v1.6.0/style.css */ +.loader-container { + display: flex; /* Use flex to align items horizontally */ + align-items: center; /* Center items vertically within the container */ + white-space: nowrap; /* Prevent line breaks within the container */ +} + +.loader { + border: 8px solid #f3f3f3; /* Light grey */ + border-top: 8px solid #3498db; /* Blue */ + border-radius: 50%; + width: 30px; + height: 30px; + animation: spin 2s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Style the progress bar */ +progress { + appearance: none; /* Remove default styling */ + height: 20px; /* Set the height of the progress bar */ + border-radius: 5px; /* Round the corners of the progress bar */ + background-color: #f3f3f3; /* Light grey background */ + width: 100%; +} + +/* Style the progress bar container */ +.progress-container { + margin-left: 20px; + margin-right: 20px; + flex-grow: 1; /* Allow the progress container to take up remaining space */ +} + +/* Set the color of the progress bar fill */ +progress::-webkit-progress-value { + background-color: #3498db; /* Blue color for the fill */ +} + +progress::-moz-progress-bar { + background-color: #3498db; /* Blue color for the fill in Firefox */ +} + +/* Style the text on the progress bar */ +progress::after { + content: attr(value '%'); /* Display the progress value followed by '%' */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; /* Set text color */ + font-size: 14px; /* Set font size */ +} + +/* Style other texts */ +.loader-container > span { + margin-left: 5px; /* Add spacing between the progress bar and the text */ +} + +.progress-bar > .generating { + display: none !important; +} + +.progress-bar{ + height: 30px !important; +} + +.type_row{ + height: 80px !important; +} + +.type_row_half{ + height: 32px !important; +} + +.scroll-hide{ + resize: none !important; +} + +.refresh_button{ + border: none !important; + background: none !important; + font-size: none !important; + box-shadow: none !important; +} + +.advanced_check_row{ + width: 250px !important; +} + +.min_check{ + min-width: min(1px, 100%) !important; +} + +.resizable_area { + resize: vertical; + overflow: auto !important; +} + +.aspect_ratios label { + width: 140px !important; +} + +.aspect_ratios label span { + white-space: nowrap !important; +} + +.aspect_ratios label input { + margin-left: -5px !important; +} + +.lora_enable label { + height: 100%; +} + +.lora_enable label input { + margin: auto; +} + +.lora_enable label span { + display: none; +} + +@-moz-document url-prefix() { + .lora_weight input[type=number] { + width: 80px; + } +} + #context-menu{ z-index:9999; position:absolute; diff --git a/modules/html.py b/modules/html.py index 769151a..25771cb 100644 --- a/modules/html.py +++ b/modules/html.py @@ -1,136 +1,3 @@ -css = ''' -.loader-container { - display: flex; /* Use flex to align items horizontally */ - align-items: center; /* Center items vertically within the container */ - white-space: nowrap; /* Prevent line breaks within the container */ -} - -.loader { - border: 8px solid #f3f3f3; /* Light grey */ - border-top: 8px solid #3498db; /* Blue */ - border-radius: 50%; - width: 30px; - height: 30px; - animation: spin 2s linear infinite; -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -/* Style the progress bar */ -progress { - appearance: none; /* Remove default styling */ - height: 20px; /* Set the height of the progress bar */ - border-radius: 5px; /* Round the corners of the progress bar */ - background-color: #f3f3f3; /* Light grey background */ - width: 100%; -} - -/* Style the progress bar container */ -.progress-container { - margin-left: 20px; - margin-right: 20px; - flex-grow: 1; /* Allow the progress container to take up remaining space */ -} - -/* Set the color of the progress bar fill */ -progress::-webkit-progress-value { - background-color: #3498db; /* Blue color for the fill */ -} - -progress::-moz-progress-bar { - background-color: #3498db; /* Blue color for the fill in Firefox */ -} - -/* Style the text on the progress bar */ -progress::after { - content: attr(value '%'); /* Display the progress value followed by '%' */ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; /* Set text color */ - font-size: 14px; /* Set font size */ -} - -/* Style other texts */ -.loader-container > span { - margin-left: 5px; /* Add spacing between the progress bar and the text */ -} - -.progress-bar > .generating { - display: none !important; -} - -.progress-bar{ - height: 30px !important; -} - -.type_row{ - height: 80px !important; -} - -.type_row_half{ - height: 32px !important; -} - -.scroll-hide{ - resize: none !important; -} - -.refresh_button{ - border: none !important; - background: none !important; - font-size: none !important; - box-shadow: none !important; -} - -.advanced_check_row{ - width: 250px !important; -} - -.min_check{ - min-width: min(1px, 100%) !important; -} - -.resizable_area { - resize: vertical; - overflow: auto !important; -} - -.aspect_ratios label { - width: 140px !important; -} - -.aspect_ratios label span { - white-space: nowrap !important; -} - -.aspect_ratios label input { - margin-left: -5px !important; -} - -.lora_enable label { - height: 100%; -} - -.lora_enable label input { - margin: auto; -} - -.lora_enable label span { - display: none; -} - -@-moz-document url-prefix() { - .lora_weight input[type=number] { - width: 80px; - } -} - -''' progress_html = '''