diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 196 |
1 files changed, 105 insertions, 91 deletions
@@ -227,20 +227,39 @@ button.custom-button{ align-self: end;
}
-.performance {
+.html-log .comments{
+ padding-top: 0.5em;
+}
+
+.html-log .comments:empty{
+ padding-top: 0;
+}
+
+.html-log .performance {
font-size: 0.85em;
color: #444;
+ display: flex;
}
-.performance p{
+.html-log .performance p{
display: inline-block;
}
-.performance .time {
- margin-right: 0;
+.html-log .performance p.time, .performance p.vram, .performance p.time abbr, .performance p.vram abbr {
+ margin-bottom: 0;
+ color: var(--block-title-text-color);
+}
+
+.html-log .performance p.time {
}
-.performance .vram {
+.html-log .performance p.vram {
+ margin-left: auto;
+}
+
+.html-log .performance .measurement{
+ color: var(--body-text-color);
+ font-weight: bold;
}
#txt2img_generate, #img2img_generate {
@@ -531,6 +550,9 @@ table.popup-table .link{ background-color: rgba(20, 20, 20, 0.95);
}
+.global-popup *{
+ box-sizing: border-box;
+}
.global-popup-close:before {
content: "×";
@@ -704,11 +726,24 @@ table.popup-table .link{ margin: 0;
}
-#available_extensions .date_added{
- opacity: 0.85;
+#available_extensions .info{
+ margin: 0.5em 0;
+ display: flex;
+ margin-top: auto;
+ opacity: 0.80;
font-size: 90%;
}
+#available_extensions .date_added{
+ margin-right: auto;
+ display: inline-block;
+}
+
+#available_extensions .star_count{
+ margin-left: auto;
+ display: inline-block;
+}
+
/* replace original footer with ours */
footer {
@@ -748,8 +783,7 @@ footer { margin: 0 0.15em;
}
.extra-networks .tab-nav .search,
-.extra-networks .tab-nav .sort,
-.extra-networks .tab-nav .sortorder{
+.extra-networks .tab-nav .sort{
display: inline-block;
margin: 0.3em;
align-self: center;
@@ -769,117 +803,67 @@ footer { width: auto;
}
-.extra-network-cards .nocards, .extra-network-thumbs .nocards{
+.extra-network-cards .nocards{
margin: 1.25em 0.5em 0.5em 0.5em;
}
-.extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1{
+.extra-network-cards .nocards h1{
font-size: 1.5em;
margin-bottom: 1em;
}
-.extra-network-cards .nocards li, .extra-network-thumbs .nocards li{
+.extra-network-cards .nocards li{
margin-left: 0.5em;
}
-.extra-network-cards .card .metadata-button:before, .extra-network-thumbs .card .metadata-button:before{
- content: "🛈";
-}
-.extra-network-cards .card .metadata-button, .extra-network-thumbs .card .metadata-button{
+.extra-network-cards .card .button-row{
display: none;
position: absolute;
color: white;
right: 0;
}
-.extra-network-cards .card .metadata-button {
- text-shadow: 2px 2px 3px black;
- padding: 0.25em;
- font-size: 22pt;
- width: 1.5em;
-}
-.extra-network-thumbs .card .metadata-button {
- text-shadow: 1px 1px 2px black;
- padding: 0;
- font-size: 16pt;
- width: 1em;
- top: -0.25em;
-}
-.extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{
- display: inline-block;
-}
-.extra-network-cards .card .metadata-button:hover, .extra-network-thumbs .card .metadata-button:hover{
- color: red;
-}
-
-
-.extra-network-thumbs {
+.extra-network-cards .card:hover .button-row{
display: flex;
- flex-flow: row wrap;
- gap: 10px;
}
-.extra-network-thumbs .card {
- height: 6em;
- width: 6em;
- cursor: pointer;
- background-image: url('./file=html/card-no-preview.png');
- background-size: cover;
- background-position: center center;
- position: relative;
+.extra-network-cards .card .card-button{
+ color: white;
}
-.extra-network-thumbs .card .preview{
- position: absolute;
- object-fit: cover;
- width: 100%;
- height:100%;
+.extra-network-cards .card .metadata-button:before{
+ content: "🛈";
}
-.extra-network-thumbs .card:hover .additional a {
- display: inline-block;
+.extra-network-cards .card .edit-button:before{
+ content: "🛠";
}
-.extra-network-thumbs .actions .additional a {
- background-image: url('./file=html/image-update.svg');
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center center;
- position: absolute;
- top: 0;
- left: 0;
- width: 24px;
- height: 24px;
- display: none;
- font-size: 0;
- text-align: -9999;
+.extra-network-cards .card .card-button {
+ text-shadow: 2px 2px 3px black;
+ padding: 0.25em 0.1em;
+ font-size: 200%;
+ width: 1.5em;
}
+.extra-network-cards .card .card-button:hover{
+ color: red;
+}
+
-.extra-network-thumbs .actions .name {
+.standalone-card-preview.card .preview{
position: absolute;
- bottom: 0;
- font-size: 10px;
- padding: 3px;
+ object-fit: cover;
width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- background: rgba(0,0,0,.5);
- color: white;
-}
-
-.extra-network-thumbs .card:hover .actions .name {
- white-space: normal;
- word-break: break-all;
+ height:100%;
}
-.extra-network-cards .card{
+.extra-network-cards .card, .standalone-card-preview.card{
display: inline-block;
- margin: 0.5em;
- width: 16em;
- height: 24em;
+ margin: 0.5rem;
+ width: 16rem;
+ height: 24rem;
box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
- border-radius: 0.2em;
+ border-radius: 0.2rem;
position: relative;
background-size: auto 100%;
@@ -913,10 +897,6 @@ footer { color: white;
}
-.extra-network-cards .card .actions:hover{
- box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important;
-}
-
.extra-network-cards .card .actions .name{
font-size: 1.7em;
font-weight: bold;
@@ -957,3 +937,37 @@ footer { width: 100%;
height:100%;
}
+
+div.block.gradio-box.edit-user-metadata {
+ width: 56em;
+ background: var(--body-background-fill);
+ padding: 2em !important;
+}
+
+.edit-user-metadata .extra-network-name{
+ font-size: 18pt;
+ color: var(--body-text-color);
+}
+
+.edit-user-metadata .file-metadata{
+ color: var(--body-text-color);
+}
+
+.edit-user-metadata .file-metadata th{
+ text-align: left;
+}
+
+.edit-user-metadata .file-metadata th, .edit-user-metadata .file-metadata td{
+ padding: 0.3em 1em;
+}
+
+.edit-user-metadata .wrap.translucent{
+ background: var(--body-background-fill);
+}
+.edit-user-metadata .gradio-highlightedtext span{
+ word-break: break-word;
+}
+
+.edit-user-metadata-buttons{
+ margin-top: 1.5em;
+}
|