1
#assets-json-url-field {
2
    width: 85%;
3
}
4

5
#assets-connect-button {
6
    width: 15%;
7
    margin-left: 5px;
8
}
9

10
.assets-url-block {
11
    display: flex;
12
    flex-direction: column;
13
}
14

15
.assets-install-hint-link {
16
    cursor: help;
17
}
18

19
.assets-connect-div {
20
    display: flex;
21
    flex-direction: row;
22
}
23

24
.assets-list-git {
25
    font-size: calc(var(--mainFontSize) * 0.8);
26
    opacity: 0.8;
27
    margin-bottom: 0.25em;
28
}
29

30
.assets-list-div h2 {
31
    margin: 0;
32
    font-size: 1.1em;
33
}
34

35
.assets-list-div h3 {
36
    text-transform: capitalize;
37
}
38

39
.assets-list-div .asset-block a {
40
    color: inherit;
41
}
42

43
.assets-list-div .asset-block {
44
    display: flex;
45
    flex-direction: row;
46
    align-items: center;
47
    justify-content: left;
48
    padding: 10px 5px;
49
    font-style: normal;
50
    gap: 5px;
51
    border-bottom: 1px solid var(--SmartThemeBorderColor);
52
}
53

54
.assets-list-div .asset-block span:first-of-type {
55
    font-weight: bold;
56
}
57

58
.asset-download-button {
59
    position: relative;
60
    border: none;
61
    outline: none;
62
    border-radius: 2px;
63
    cursor: pointer;
64
    filter: none !important;
65
}
66

67
.asset-download-button:active {
68
    background: #007a63;
69
}
70

71
.asset-download-button-text {
72
    font: bold 20px "Quicksand", san-serif;
73
    color: #ffffff;
74
    transition: all var(--animation-duration-2x);
75
}
76

77
.asset-download-button-loading .asset-download-button-text {
78
    visibility: hidden;
79
    opacity: 0;
80
}
81

82
.asset-download-button-loading::after {
83
    content: "";
84
    position: absolute;
85
    width: 16px;
86
    height: 16px;
87
    top: 0;
88
    left: 0;
89
    right: 0;
90
    bottom: 0;
91
    margin: auto;
92
    border: 4px solid transparent;
93
    border-top-color: #ffffff;
94
    border-radius: 50%;
95
    animation: asset-download-button-loading-spinner 1s ease infinite;
96
}
97

98
.asset-name .avatar {
99
    --imgSize: 30px !important;
100
    flex: unset;
101
    width: var(--imgSize);
102
    height: var(--imgSize);
103
}
104

105
.asset-name .avatar img {
106
    width: var(--imgSize);
107
    height: var(--imgSize);
108
    border-radius: 50%;
109
    object-fit: cover;
110
    object-position: center center;
111
}
112

113
@keyframes asset-download-button-loading-spinner {
114
    from {
115
        transform: rotate(0turn);
116
    }
117

118
    to {
119
        transform: rotate(1turn);
120
    }
121
}
122

123
.characterAssetList {
124
    display: flex;
125
    flex-wrap: wrap;
126
    justify-content: space-evenly;
127
}
128

129
.characterAsset {
130
    display: flex;
131
    flex-direction: column;
132
    align-items: center;
133
    padding: 10px;
134
    gap: 10px;
135
    border: 1px solid var(--SmartThemeBorderColor);
136
    background-color: var(--black30a);
137
    border-radius: 10px;
138
    width: 17%;
139
    min-width: 150px;
140
    margin: 5px;
141
    overflow: hidden;
142
}
143

144
.characterAssetName {
145
    font-size: 1.2em;
146
    font-weight: bold;
147
    white-space: nowrap;
148
    overflow: hidden;
149
    text-overflow: ellipsis;
150
}
151

152
.characterAssetImage {
153
    max-height: 140px;
154
    object-fit: scale-down;
155
    border-radius: 5px;
156
}
157

158
.characterAssetDescription {
159
    font-size: 0.75em;
160
    overflow: hidden;
161
    display: -webkit-box;
162
    -webkit-box-orient: vertical;
163
    -webkit-line-clamp: 4;
164
    flex: 1;
165
}
166

167
.characterAssetButtons {
168
    display: flex;
169
    flex-direction: row;
170
    gap: 5px;
171
    align-items: center;
172
}
173

174
.asset-name .tag {
175
    gap: 5px;
176
    align-items: baseline;
177
    font-size: calc(var(--mainFontSize)* 0.8);
178
    cursor: pointer;
179
    opacity: 0.9;
180
    margin-left: 2px;
181
}
182

183
.asset-name .asset-author-info {
184
    display: flex;
185
    align-items: baseline;
186
    gap: 2px;
187
    opacity: 0.7;
188
    font-size: 0.85em;
189
    overflow: hidden;
190
}
191

192
.asset-name .asset-author-info>span {
193
    white-space: nowrap;
194
    overflow: hidden;
195
    text-overflow: ellipsis;
196
}
197

198
.asset-name .asset-author-info:hover {
199
    opacity: 1;
200
    transition: opacity var(--animation-duration) ease-in-out;
201
}
202

203
.asset-name>b {
204
    font-weight: 600;
205
}
206

207
div:is(.assets-list-extensions-official, .assets-list-extensions-community):has(.assets-list-extensions:empty) {
208
    display: none;
209
}
210

211
div:is(.assets-list-extensions-official, .assets-list-extensions-community) {
212
    margin-top: 10px;
213
}