mirrors/stable-diffusion-webui
1
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2026-02-01 13:22:04 -08:00
Code Issues Projects Releases Packages Wiki Activity

Add scrollbar to dirs view. Add new class for custom scrollbar components.

Browse source
This commit is contained in:
Sj-Si 2024-04-23 13:40:07 -04:00
parent 7182748b16
commit 4fa6f7cf52
2 changed files with 32 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

8
html/extra-networks-pane.html
View file

@ -140,13 +140,13 @@
</div>
</div>
<div class="extra-network-content--container">
<div class="extra-network-content extra-network-content--dirs-view {dirs_view_hidden_cls}">
<div class="extra-network-content extra-network-content--dirs-view styled-scrollbar {dirs_view_hidden_cls}">
{dirs_html}
</div>
<div class="extra-network-content extra-network-content--cards resize-handle-row">
<div class="extra-network-content resize-handle-col {tree_view_hidden_cls}" style="{tree_view_style}">
<div id='{tabname}_{extra_networks_tabname}_tree_list_scroll_area'
class='extra-network-tree clusterize-scroll'>
class='extra-network-tree styled-scrollbar clusterize-scroll'>
<div id='{tabname}_{extra_networks_tabname}_tree_list_content_area'
class='extra-network-tree-content clusterize-content'>
<div class="clusterize-no-data">Loading...</div>
@ -155,7 +155,7 @@
</div>
<div class="extra-network-content resize-handle-col" style="{cards_view_style}">
<div id='{tabname}_{extra_networks_tabname}_cards_list_scroll_area'
class='extra-network-cards clusterize-scroll'>
class='extra-network-cards styled-scrollbar clusterize-scroll'>
<div id='{tabname}_{extra_networks_tabname}_cards_list_content_area'
class='extra-network-cards-content clusterize-content'>
<div class="clusterize-no-data">Loading...</div>
@ -164,4 +164,4 @@
</div>
</div>
</div>
</div>
</div>

52
style.css
View file

@ -1212,27 +1212,6 @@ body.resizing .resize-handle {
color: var(--input-placeholder-color) !important;
}
/* Custom scrollbar style. Only works on chromium based browsers. */
.clusterize-scroll::-webkit-scrollbar {
background: transparent;
width: var(--text-lg);
}
.clusterize-scroll::-webkit-scrollbar-track {
background: transparent;
background-clip: content-box;
}
.clusterize-scroll::-webkit-scrollbar-thumb {
background: var(--border-color-primary);
border-radius: var(--radius-xl);
border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary);
}
.clusterize-scroll::-webkit-scrollbar-button {
display: none;
}
.extra-network-pane {
display: flex;
flex-direction: column;
@ -1256,13 +1235,17 @@ body.resizing .resize-handle {
width: 100%;
height: 100%;
flex-direction: column;
gap: var(--spacing-sm);
}
.extra-network-content--dirs-view {
flex: 0 1 0%;
flex-direction: row;
flex-wrap: wrap;
flex: 0 1 min-content;
flex-flow: row wrap;
max-height: 20%;
gap: var(--spacing-sm);
overflow: clip auto;
border: 1px solid var(--block-border-color);
padding: var(--spacing-md);
}
.extra-network-content--cards {
@ -1661,3 +1644,24 @@ body.resizing .resize-handle {
background: var(--button-primary-background-fill);
border-color: var(--button-primary-border-color);
}
/* Custom scrollbar style. Only works on chromium based browsers. */
.styled-scrollbar::-webkit-scrollbar {
background: transparent;
width: var(--text-lg);
}
.styled-scrollbar::-webkit-scrollbar-track {
background: transparent;
background-clip: content-box;
}
.styled-scrollbar::-webkit-scrollbar-thumb {
background: var(--border-color-primary);
border-radius: var(--radius-xl);
border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary);
}
.styled-scrollbar::-webkit-scrollbar-button {
display: none;
}