A more condenced list of extra networks

[CurtisDS]

I didnt like that the extra network previews were so huge (I have a lot of them and it was getting too crazy). So here is some css you can add to your user.css file to change it to a more compact look:

View CSS

.extra-network-cards .card {
	width: 12em;
	height: 5.5em;
	padding: 5px 5px;
	border-color: rgb(208, 208, 208);
	border-width: 1px;
	background-repeat: no-repeat;
	background-position: left;
	background-color: #ffff;
	background-size: contain;
	padding-left: 6em;
	position: relative;
	line-height: 1em;
	display: inline-flex;
	overflow: hidden;
	align-items: stretch;
    border-radius: 0.2rem;
}

.extra-network-cards .card ul a {
	width: 1em;
	display: inline-block;
	text-shadow:
		-1px -1px 2px #fff,
		1px -1px 2px #fff,
		-1px 1px 2px #fff,
		1px 1px 2px #fff;
	white-space: nowrap;
	overflow: hidden;
}

.extra-network-cards .card ul a::before {
	content: "⟳";
	cursor: pointer;
	text-indent: 0;
	margin-right: 40px;
	position: relative;
	z-index: 1;
	display: inline-block;
}

.extra-network-cards .card .actions {
	display: flex;
	position: relative;
	padding: 0px;
	color: black;
	background: transparent;
	text-shadow: none;
	box-shadow: none;
	margin: 0px;
	background-blend-mode: screen;
	flex-direction: row-reverse;
	gap: 4px;
	flex: 1;
	align-items: flex-end;
}

.extra-network-cards .card .actions span::before,
.extra-network-cards .card .actions a::after {
	content: '';
	background: white;
	position: absolute;
	top: 0.5em;
	left: 0em;
	right: 0.4em;
	bottom: 0.3em;
	box-shadow: 0 0 0.4em 0.4em white;
	opacity: 0.9;
	z-index: -1;
}

.extra-network-cards .card .actions a::after {
	z-index: 0;
}

.extra-network-cards .card .actions .name {
	z-index: 1;
}


.extra-network-cards .card .actions>* {
	position: relative;
}

.extra-network-cards .card .actions .name {
	white-space: normal;
	color: black;
	text-shadow:
		-1px -1px 2px #fff,
		1px -1px 2px #fff,
		-1px 1px 2px #fff,
		1px 1px 2px #fff;
	font-size: unset;
	font-weight: normal;
	display: block;
	flex: 1 1 40px;
}

.extra-network-cards .card .actions .additional {
	display: block;
	align-self: center;
}

.extra-network-cards .card .actions:hover {
	box-shadow: none !important;
}

.extra-network-cards .card ul {
	margin: 0 0 0 0.2em;
	display: contents;
}

or to remove built in previews entirely:

View CSS

.extra-network-cards .card ul a:not(.info) {
	display: none;
}

.extra-network-cards .card {
    width: unset;
    height: auto;
    padding: 5px 15px;
    background-image: linear-gradient(to right bottom, rgba(243, 244, 246, 0.7), rgba(229, 231, 235, 0.8)) !important;
    border-color: rgb(208, 208, 208);
    border-width: 1px;
    border-radius: 0.2rem;
    box-shadow: 0 0 4px rgba(128, 128, 128, 0.2);
}

.extra-network-cards .card .actions {
    display: contents;
}

.extra-network-cards .card .actions .name {
    white-space: nowrap;
    color: black;
    text-shadow: none;
    font-size: unset;
    font-weight: normal;
}

.extra-network-cards .card .actions .additional {
    display: block;
    float: right;
}

.extra-network-cards .card .actions:hover .additional {
    display: block;
}

.extra-network-cards .card ul {
  margin: 0 0 0 0.5em;
}

Edit:

There is a built in setting to change the style of preview images for the extra networks in the "Extra Networks" setting page. If you change it from "cards" to "thumbs" you will get this (the custom CSS above does not affect the previews if you have it set to "thumbs"):

[quasiblob]

Nice. Do both of your layouts still allow changing the preview image? Asking because there is a text (replace preview) that appears above the name of the network in default layout when you hover over the text.

I already asked about this in thread a couple of days ago (#7004). Definitely will try this :)

[CurtisDS]

the top one does. I replaced the "replace preview" pop up with just: ⟳. So click that and it will replace your image. The bottom one, no it doesnt.... but you wouldnt be able to see them anyway so I dont understand why you would want to replace something you cant see.

If you really want to still be able to replace the preview image even without being able to see it, remove this line at the bottom of the CSS:

.extra-network-cards .card .actions:hover .additional {
    display: none;
}

I also made this CSS but didnt post it because I think the images are too small to be functional... Its also not as tested (IE it might look bad if you have different aspect ratios of images)... but if you want to use it....

again press ⟳ to replace the preview image

View CSS

.extra-network-cards .card {
    width: unset;
    height: 3.5em;
    padding: 5px 10px;
    border-color: rgb(208, 208, 208);
    border-width: 1px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: 3.3em;
    padding-left: 3.5em;
    position: relative;
    line-height: 2.5em;
}

.extra-network-cards .card ul a {
    text-indent: -9999px;
    width: 1em;
    display: inline-block;
    text-shadow: none;
    white-space: nowrap;
    color: black;
      overflow: hidden;
      text-indent: 40px;
}

.extra-network-cards .card ul a::before {
    content: "⟳";
    cursor: pointer;
    text-indent: 0;
    float: left;
    width: 1em;
}

.extra-network-cards .card .actions {
    display: contents;
}

.extra-network-cards .card .actions .name {
    white-space: nowrap;
    color: black;
    text-shadow: none;
    font-size: unset;
    font-weight: normal;
}

.extra-network-cards .card .actions .additional {
    display: block;
    float: right;
}

.extra-network-cards .card ul {
    margin: 0 0 0 0.2em;
}

[quasiblob]

"I dont understand why you would want to replace something you cant see." Obviously when there is no image, there is no need to change it, I guess I didn't check what I wrote. BTW I wouldn't say the last one is useless, I think that would be the one I might use.

[CurtisDS]

Nice! On my display I just found that the images were a bit too much on the small side. However, if you like that one better feel free to use it. And you can always play around with the styles if you still dont like something.

[EllangoK]

This is great!

If possible I think you should open a pull request to add it as a dropdown setting so that other people could use it, like the current thumbs and card settings already in the Extra Networks section.

[CurtisDS]

LMAO did I completely miss that setting or did they add it recently? If I saw that existed I wouldn't have bothered with this. Oh well.

Anyone can already use this if they add the CSS code I shared to their user.css file. And if someone else wants to make it a pull request they can but, its honestly not all that different from the "thumbs" setting so I have my doubts it would get merged.

Edit: I guess the "no previews" could get added

[freshlesh3]

How would you move the extra networks container above the prompt ui? It feels more intuitive that it would open above the prompt section in a workflow.
Review model info > copy to prompt > refine

[CurtisDS]

#7484