File size: 2,321 Bytes
4d6f2bc
6ac2c39
4d6f2bc
b7c0c19
4d6f2bc
 
b7c0c19
4d6f2bc
c851587
 
 
 
4d6f2bc
 
 
 
 
6ac2c39
 
4d6f2bc
 
c851587
 
6ac2c39
c851587
 
4d6f2bc
9d8b222
 
 
 
 
 
 
 
 
 
 
 
 
4d6f2bc
c851587
 
053b3a4
 
 
c851587
 
053b3a4
c851587
 
 
 
 
 
 
 
 
 
 
 
 
 
ad19934
 
 
053b3a4
c851587
 
ad19934
1a688bc
 
4d6f2bc
 
6278196
c851587
 
 
4d6f2bc
 
c851587
6ac2c39
c851587
6ac2c39
c851587
6ac2c39
 
c851587
6ac2c39
 
 
4d6f2bc
c851587
4d6f2bc
 
 
c851587
4d6f2bc
 
 
 
 
c851587
 
 
 
 
23f4f95
b7c0c19
c851587
b7c0c19
c851587
b7c0c19
 
c851587
 
 
 
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
.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;
}

.gallery {
  background-color: var(--bg);
}
.gallery:is(.dark *) {
  background-color: var(--bg-dark);
}
.gallery > .grid-wrap {
  overflow-y: auto;
}
.gallery, .gallery > .grid-wrap {
  height: 100%;
  max-height: 574px;
}
@media (min-width: 640px) {
  .gallery, .gallery > .grid-wrap {
    height: 574px;
    max-height: none;
  }
}

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

.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 {
  /* see config.py for default seed */
  content: var(--seed, "-1");
}

#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;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

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