From 1f39d718f9f141c431fabce6bede20839aa22863 Mon Sep 17 00:00:00 2001 From: P-Hellmann Date: Fri, 29 Nov 2024 08:58:22 +0100 Subject: [PATCH 1/6] Small changes to black-teal-reimagined --- javascript/black-teal-reimagined.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css index e5618c02c..94fccdea9 100644 --- a/javascript/black-teal-reimagined.css +++ b/javascript/black-teal-reimagined.css @@ -813,10 +813,18 @@ textarea[rows="1"] { background: var(--background-color); box-shadow: var(--shadow-md); border-radius: var(--radius-lg); + transform: translateX(100%); + animation: slideIn 0.5s forwards; overflow: hidden; /* Prevents overflow of content */ } +@keyframes slideIn { + to { + transform: translateX(0); + } +} + /* Extra Networks Styles */ .extra-networks { background: var(--background-color); @@ -1032,6 +1040,20 @@ textarea[rows="1"] { height: 100%; } +/* Token counters styling */ + +#txt2img_token_counter, #txt2img_negative_token_counter { + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 10px; +} + +#txt2img_prompt_container { + margin: 5px; + padding: 0px; +} + /* Based on Gradio Built-in Dark Theme */ :root, .light, From 3e3501218b0179713f2eb92e4e59f5aeafa8349f Mon Sep 17 00:00:00 2001 From: P-Hellmann Date: Fri, 29 Nov 2024 10:01:53 +0100 Subject: [PATCH 2/6] Removed redundant css --- javascript/black-teal-reimagined.css | 36 ++++------------------------ 1 file changed, 4 insertions(+), 32 deletions(-) diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css index 94fccdea9..70315782d 100644 --- a/javascript/black-teal-reimagined.css +++ b/javascript/black-teal-reimagined.css @@ -655,27 +655,6 @@ svg.feather.feather-image, 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: none !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; - border-radius: var(--radius-md); -} - #txt2img_styles, #img2img_styles, #control_styles { @@ -746,11 +725,6 @@ svg.feather.feather-image, margin-left: 1em; } -#settings_search textarea { - padding: 0.5em; - height: 2.2em !important; -} - #txt2img_cfg_scale { min-width: 200px; } @@ -762,12 +736,6 @@ svg.feather.feather-image, margin-bottom: 0.2em; } -textarea[rows="1"] { - height: 33px !important; - width: 99% !important; - padding: 8px !important; -} - #extras_upscale { margin-top: 10px; } @@ -1054,6 +1022,10 @@ textarea[rows="1"] { padding: 0px; } +#text2img_prompt label, #text2img_neg_prompt label { + margin: 0px; +} + /* Based on Gradio Built-in Dark Theme */ :root, .light, From 73dbdbbddc2e4adffb5d91d9b0805e0cf5046edc Mon Sep 17 00:00:00 2001 From: P-Hellmann Date: Fri, 29 Nov 2024 10:58:40 +0100 Subject: [PATCH 3/6] Rearrange forms and tab-nav --- javascript/black-teal-reimagined.css | 34 ++++++++++++---------------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css index 70315782d..9e7d357a4 100644 --- a/javascript/black-teal-reimagined.css +++ b/javascript/black-teal-reimagined.css @@ -228,16 +228,17 @@ input[type='range']::-moz-range-track { .tab-nav { display: flex; /* Use flexbox for layout */ - justify-content: space-around; + justify-content: space-evenly; /* Space out the tabs evenly */ align-items: center; /* Center items vertically */ background: var(--background-color); /* Background color */ - border-bottom: 1px solid var(--highlight-color) !important; + border-bottom: 3px solid var(--highlight-color) !important; /* Bottom border for separation */ box-shadow: var(--shadow-md); /* Shadow for depth */ + margin-bottom: 5px; } /* Individual Tab Styles */ @@ -246,19 +247,24 @@ input[type='range']::-moz-range-track { /* No background for default state */ color: var(--text-color); /* Text color */ - border: none; + border: 1px solid var(--highlight-color); /* No border */ - border-radius: var(--radius-xxxl); + border-radius: var(--radius-xxl); /* Rounded corners */ cursor: pointer; /* Pointer cursor */ transition: background 0.3s ease, color 0.3s ease; /* Smooth transition */ + padding-top: 5px; + padding-bottom: 5px; + padding-right: 10px; + padding-left: 10px; + margin-bottom: 3px; } /* Active Tab Style */ -.tab-nav>button.active { - background: var(--highlight-color); +.tab-nav>button.selected { + background: var(--primary-100); /* Highlight active tab */ color: var(--background-color); /* Change text color for active tab */ @@ -386,7 +392,8 @@ div.form { border-width: 0; box-shadow: var(--shadow-md); background: var(--background-fill-primary); - padding: 16px; + border-bottom: 3px solid var(--highlight-color); + padding: 3px; border-radius: var(--radius-md); } @@ -720,11 +727,6 @@ svg.feather.feather-image, width: 15em; } -#settings_search { - margin-top: 1em; - margin-left: 1em; -} - #txt2img_cfg_scale { min-width: 200px; } @@ -749,7 +751,6 @@ svg.feather.feather-image, min-width: var(--left-column); max-width: var(--left-column); background-color: var(--neutral-950); - padding-top: 16px; } #pnginfo_html2_info { @@ -837,11 +838,6 @@ svg.feather.feather-image, background: var(--highlight-color); } -/* Extra Networks Tab */ -.extra-networks-tab { - padding: 0 !important; -} - /* Subdirectories Styles */ .extra-network-subdirs { background: var(--input-background-fill); @@ -1014,7 +1010,7 @@ svg.feather.feather-image, display: flex; flex-direction: column; justify-content: space-evenly; - padding: 10px; + padding: 5px; } #txt2img_prompt_container { From e3704ba057bbeeb58b63b107b0feb4426bf6a5bf Mon Sep 17 00:00:00 2001 From: P-Hellmann Date: Fri, 29 Nov 2024 11:23:07 +0100 Subject: [PATCH 4/6] small changes --- extensions-builtin/sdnext-modernui | 2 +- javascript/black-teal-reimagined.css | 44 ++++------------------------ 2 files changed, 7 insertions(+), 39 deletions(-) diff --git a/extensions-builtin/sdnext-modernui b/extensions-builtin/sdnext-modernui index 3008cee4b..f083ce41a 160000 --- a/extensions-builtin/sdnext-modernui +++ b/extensions-builtin/sdnext-modernui @@ -1 +1 @@ -Subproject commit 3008cee4b67bb00f8f1a4fe4510ec27ba92aa418 +Subproject commit f083ce41a9f18b500f26745ea9e86855e509d2cb diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css index 9e7d357a4..eb6942b8c 100644 --- a/javascript/black-teal-reimagined.css +++ b/javascript/black-teal-reimagined.css @@ -216,6 +216,7 @@ input[type='range']::-moz-range-track { ::-webkit-scrollbar-track { background: var(--scrollbar-bg); + border-radius: var(--radius-lg); } ::-webkit-scrollbar-thumb { @@ -234,11 +235,14 @@ input[type='range']::-moz-range-track { /* Center items vertically */ background: var(--background-color); /* Background color */ - border-bottom: 3px solid var(--highlight-color) !important; + border-bottom: 1px dashed var(--highlight-color) !important; /* Bottom border for separation */ box-shadow: var(--shadow-md); /* Shadow for depth */ margin-bottom: 5px; + /* Add some space between the tab nav and the content */ + padding-bottom: 5px; + /* Add space between buttons and border */ } /* Individual Tab Styles */ @@ -395,6 +399,7 @@ div.form { border-bottom: 3px solid var(--highlight-color); padding: 3px; border-radius: var(--radius-md); + margin: 1px; } /* Gradio Style Classes */ @@ -772,12 +777,6 @@ svg.feather.feather-image, /* Extra Networks Container */ #extra_networks_root { - width: 300px; - /* Set a fixed width for the sidebar */ - position: absolute; - height: auto; - right: 0; - top: 13em; z-index: 100; background: var(--background-color); box-shadow: var(--shadow-md); @@ -797,15 +796,6 @@ svg.feather.feather-image, /* Extra Networks Styles */ .extra-networks { background: var(--background-color); - padding: var(--block-label-padding); - border-radius: var(--radius-lg); -} - -/* Extra Networks Div Styles */ -.extra-networks>div { - margin: 0; - border-bottom: none !important; - gap: 0.3em 0; } .extra-networks .tab-nav>button:hover { @@ -822,32 +812,10 @@ svg.feather.feather-image, margin-top: 50px; } -/* Individual Buttons */ -.extra-networks .buttons>button { - margin-left: -0.2em; - height: 1.4em; - color: var(--primary-300) !important; - font-size: 20px !important; - background: var(--button-primary-background-fill); - border: none; - border-radius: var(--radius-sm); - transition: var(--transition); -} - .extra-networks .buttons>button:hover { background: var(--highlight-color); } -/* Subdirectories Styles */ -.extra-network-subdirs { - background: var(--input-background-fill); - overflow-x: hidden; - overflow-y: auto; - min-width: 120px; - padding-top: 0.5em; - margin-top: -4px !important; -} - /* Extra Networks Page */ .extra-networks-page { display: flex; From fd5df851ad5dff22167f02876dd22fb97e1bbf4c Mon Sep 17 00:00:00 2001 From: P-Hellmann Date: Fri, 29 Nov 2024 12:14:24 +0100 Subject: [PATCH 5/6] networks page rework --- javascript/black-teal-reimagined.css | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css index eb6942b8c..b1e840348 100644 --- a/javascript/black-teal-reimagined.css +++ b/javascript/black-teal-reimagined.css @@ -816,11 +816,6 @@ svg.feather.feather-image, background: var(--highlight-color); } -/* Extra Networks Page */ -.extra-networks-page { - display: flex; -} - /* Network Cards Container */ .extra-network-cards { display: flex; @@ -828,6 +823,8 @@ svg.feather.feather-image, overflow-y: auto; overflow-x: hidden; align-content: flex-start; + padding-top: 20px; + justify-content: center; width: 100%; /* Ensures it takes full width */ } @@ -872,16 +869,23 @@ svg.feather.feather-image, box-shadow: var(--button-shadow); min-height: 30px; border-radius: var(--radius-md); + z-index: 9999; } /* Hover Effects */ +.extra-network-cards .card:hover { + transform: scale(1.3); + z-index: 9999; /* Use a high value to ensure it appears on top */ + transition: transform 0.3s ease, z-index 0s; /* Smooth transition */ +} + .extra-network-cards .card:hover .overlay { - background: rgba(0, 0, 0, 0.70); + z-index: 10000; /* Ensure overlay is also on top */ } .extra-network-cards .card:hover .preview { box-shadow: none; - filter: grayscale(100%); + filter: grayscale(0%); } /* Tags Styles */ @@ -913,6 +917,15 @@ svg.feather.feather-image, font-size: 34px !important; } +.extra-network-cards .card .actions { + background: none; +} + +.extra-network-cards .card .actions .details { + bottom: 50px; + background-color: var(--neutral-800); +} + .extra-network-cards .card .actions>span:hover { color: var(--highlight-color); } From c76619aa18f7f60d42226aa529b3fde711d4dc94 Mon Sep 17 00:00:00 2001 From: P-Hellmann Date: Fri, 29 Nov 2024 12:24:19 +0100 Subject: [PATCH 6/6] mini changes --- javascript/black-teal-reimagined.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/javascript/black-teal-reimagined.css b/javascript/black-teal-reimagined.css index b1e840348..b7567ce75 100644 --- a/javascript/black-teal-reimagined.css +++ b/javascript/black-teal-reimagined.css @@ -631,11 +631,6 @@ svg.feather.feather-image, color: #888; } -.extra-networks { - border-left: 2px solid var(--highlight-color) !important; - padding-left: 4px; -} - .image-buttons { justify-content: center; gap: 0 !important; @@ -795,7 +790,8 @@ svg.feather.feather-image, /* Extra Networks Styles */ .extra-networks { - background: var(--background-color); + border-left: 2px solid var(--highlight-color) !important; + padding-left: 4px; } .extra-networks .tab-nav>button:hover {