1
.expression-helper {
2
    display: inline-block;
3
    height: 100%;
4
    vertical-align: middle;
5
}
6

7
#expression-wrapper {
8
    display: flex;
9
    height: calc(100vh - var(--topBarBlockSize));
10
    width: 100vw;
11
}
12

13
#visual-novel-wrapper {
14
    display: flex;
15
    height: calc(100vh - var(--topBarBlockSize));
16
    width: 100vw;
17
    overflow: hidden;
18
}
19

20
#visual-novel-wrapper .expression-holder {
21
    width: max-content;
22
    display: flex;
23
    left: unset;
24
    right: unset;
25
}
26

27
#visual-novel-wrapper .hidden {
28
    display: none !important;
29
    visibility: hidden !important;
30
}
31

32
/*#visual-novel-wrapper img.expression {
33
    object-fit: cover;
34
}*/
35

36
.expression-holder {
37
    min-width: 100px;
38
    min-height: 100px;
39
    max-height: 90vh;
40
    max-width: 90vh;
41
    width: calc((100vw - var(--sheldWidth)) /2);
42
    position: absolute;
43
    bottom: 0;
44
    padding: 0;
45
    left: 0;
46
    filter: drop-shadow(2px 2px 2px #51515199);
47
    z-index: 2;
48
    overflow: hidden;
49
    resize: both;
50
    display: flex;
51
    justify-content: center;
52
}
53

54
#no_chat_expressions {
55
    text-align: center;
56
    margin: 10px 0;
57
    font-weight: bold;
58
    opacity: 0.8;
59
}
60

61
#image_list_header_name {
62
    font-weight: 400;
63
}
64

65
img.expression {
66
    min-width: 100px;
67
    min-height: 100px;
68
    max-height: 90vh;
69
    max-width: 90vh;
70
    top: 0;
71
    bottom: 0;
72
    padding: 0;
73
    vertical-align: bottom;
74
    object-fit: contain;
75
}
76

77
img.expression[src=""] {
78
    visibility: hidden;
79
}
80

81
img.expression.default {
82
    vertical-align: middle;
83
    max-height: 120px;
84
    object-fit: contain !important;
85
    margin-top: 50px;
86
}
87

88
.expression-clone {
89
    position: absolute;
90
}
91

92
.debug-image {
93
    display: none;
94
    visibility: collapse;
95
    opacity: 0;
96
    width: 0px;
97
    height: 0px;
98
}
99

100
.expression_list_item {
101
    position: relative;
102
    max-width: 20%;
103
    min-width: 100px;
104
    max-height: 200px;
105
    background-color: #515151b0;
106
    border-radius: 10px;
107
    cursor: pointer;
108
    display: flex;
109
    flex-direction: column;
110
    align-items: center;
111
    justify-content: center;
112
}
113

114
.expression_list_image_container {
115
    overflow: hidden;
116
}
117

118
.expression_list_title {
119
    position: absolute;
120
    bottom: 0;
121
    left: 0;
122
    text-align: center;
123
    font-weight: 600;
124
    background-color: #000000a8;
125
    width: 100%;
126
    height: 20%;
127
    display: flex;
128
    justify-content: center;
129
    align-items: center;
130
    flex-direction: column;
131
    line-height: 1;
132
}
133
.expression_list_custom {
134
    font-size: 0.66rem;
135
}
136

137
.expression_list_buttons {
138
    position: absolute;
139
    top: 0;
140
    left: 0;
141
    width: 100%;
142
    display: flex;
143
    flex-direction: row;
144
    justify-content: space-between;
145
    align-items: center;
146
    /* height: 20%; */
147
    padding: 0.25rem;
148
}
149

150
.menu_button.expression_list_delete,
151
.menu_button.expression_list_upload {
152
    margin-top: 0;
153
    margin-bottom: 0;
154
}
155

156
.expression_list_image {
157
    max-width: 100%;
158
    height: 100%;
159
    object-fit: cover;
160
}
161

162
#image_list {
163
    display: flex;
164
    flex-direction: row;
165
    column-gap: 1rem;
166
    margin: 1rem;
167
    flex-wrap: wrap;
168
    justify-content: space-evenly;
169
    row-gap: 1rem;
170
}
171

172
#image_list .expression_list_item[data-expression-type="success"] .expression_list_title {
173
    color: green;
174
}
175

176
#image_list .expression_list_item[data-expression-type="additional"] .expression_list_title {
177
    color: darkolivegreen;
178
}
179
#image_list .expression_list_item[data-expression-type="additional"] .expression_list_title::before {
180
    content: '➕';
181
    position: absolute;
182
    top: -7px;
183
    left: -9px;
184
    font-size: 14px;
185
    color: transparent;
186
    text-shadow: 0 0 0 darkolivegreen;
187
}
188

189
#image_list .expression_list_item[data-expression-type="failure"] .expression_list_title {
190
    color: red;
191
}
192

193
.expression_settings label {
194
    display: flex;
195
    align-items: center;
196
    flex-direction: row;
197
    margin-left: 0px;
198
}
199

200
.expression_settings label input {
201
    margin-left: 0px !important;
202
}
203

204
.expression_buttons .menu_button {
205
    width: fit-content;
206
    display: flex;
207
    gap: 10px;
208
    align-items: baseline;
209
    flex-direction: row;
210
}
211

212
#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"],
213
#expressions_container:has(#expressions_allow_multiple:not(:checked)) label[for="expressions_reroll_if_same"] {
214
    opacity: 0.3;
215
    transition: opacity var(--animation-duration) ease;
216
}
217
#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"]:hover,
218
#expressions_container:has(#expressions_allow_multiple:not(:checked)) #image_list .expression_list_item[data-expression-type="additional"]:focus {
219
    opacity: unset;
220
}