File size: 2,623 Bytes
4d6f2bc
6ac2c39
4d6f2bc
b7c0c19
4d6f2bc
 
b7c0c19
4d6f2bc
c851587
 
 
 
4d6f2bc
 
 
 
 
6ac2c39
 
4d6f2bc
 
459aacb
 
 
 
c851587
 
6ac2c39
c851587
 
4d6f2bc
611f9c5
9d8b222
 
611f9c5
b702e65
ef33bcd
9d8b222
4d6f2bc
c851587
 
053b3a4
 
61ad3d2
611f9c5
61ad3d2
 
ef33bcd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
053b3a4
c851587
 
053b3a4
c851587
 
 
 
 
 
 
 
 
 
 
 
 
 
ad19934
 
 
053b3a4
c851587
 
ad19934
1a688bc
4d6f2bc
 
c851587
 
 
 
611f9c5
b7c0c19
c851587
b7c0c19
c851587
b7c0c19
 
c851587
 
 
 
ef33bcd
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
.accordion {
  --block-border-width: 0px;
  background-color: transparent;
  padding: 0px;
}
.accordion > button {
  margin-bottom: 16px;
  justify-content: flex-start;
  color: var(--body-text-color-subdued);
}
.accordion > button:hover {
  color: var(--body-text-color);
}
.accordion > button > span:first-child {
  width: auto;
  margin-right: 4px;
}
.accordion .tabitem > div {
  --block-border-width: 1px;
}

#embeddings .token {
  border-radius: 4px;
}

.gallery {
  background-color: var(--bg);
}
.gallery:is(.dark *) {
  background-color: var(--bg-dark);
}
.gallery .grid-wrap {
  overflow-y: auto;
}
.gallery, .gallery .grid-wrap {
  height: calc(100vh - 400px);
  max-height: none;
}

.icon-button {
  max-width: 42px;
}

.image-container {
  max-height: calc(100vh - 480px);
}

#intro {
  margin-bottom: 8px !important;
}
#intro > div {
  display: flex;
}
#intro > div > h1 > span {
  font-style: italic;
  color: #047857 !important;
}
#intro > div > h1 > span:is(.dark *) {
  color: #10b981 !important;
}
#intro > div > svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.25rem;
  margin-left: 0.5rem;
  align-self: center;
  fill: #047857 !important;
  animation: spin 3s linear infinite reverse;
}
#intro > div > svg:is(.dark *) {
  fill: #10b981 !important;
}
#intro nav {
  display: flex;
  column-gap: 0.5rem;
}
#intro nav a, #intro nav span {
  white-space: nowrap;
  font-family: monospace;
}
#intro nav span {
  font-weight: 500;
  color: var(--body-text-color);
}
#intro nav a {
  color: var(--body-text-color-subdued);
}
#intro nav a:hover {
  color: var(--body-text-color);
}

.popover {
  position: relative;
}
.popover:hover::after {
  white-space: nowrap;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--button-secondary-border-color-hover);
  background: var(--button-secondary-background-fill-hover);
  color: var(--button-secondary-text-color-hover);
  font-weight: var(--section-header-text-weight);
  font-size: var(--section-header-text-size);
}
.popover#random:hover::after {
  content: 'Random prompt';
}
.popover#clear:hover::after {
  content: 'Clear gallery';
}
.popover#refresh:hover::after {
  content: var(--seed, "-1");
}

.tabs, .tabitem, .tab-nav, .tab-nav > .selected {
  border-width: 0px;
}
.tabitem {
  max-height: calc(100vh - 260px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0 8px;
}
.tab-nav {
  margin-bottom: 16px;
}
.tab-nav > button {
  padding-bottom: 8px;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}