1
/* Main Page Backgrounds */
2
#bg1 {
3
    background-repeat: no-repeat;
4
    background-attachment: fixed;
5
    background-size: cover;
6
    position: absolute;
7
    width: 100%;
8
    height: 100%;
9
    transition: background-image var(--animation-duration-3x) ease-in-out;
10
    z-index: -1;
11
}
12

13
/* Fitting options */
14
#background_fitting {
15
    max-width: 8em;
16
}
17

18
/* Fill/Cover - scales to fill width while maintaining aspect ratio */
19
#bg1.cover {
20
    background-size: cover;
21
    background-position: center;
22
}
23

24
/* Fit/Contain - shows entire image maintaining aspect ratio */
25
#bg1.contain {
26
    background-size: contain;
27
    background-position: center;
28
    background-repeat: no-repeat;
29
}
30

31
/* Stretch - stretches to fill entire space */
32
#bg1.stretch {
33
    background-size: 100% 100%;
34
}
35

36
/* Center - centers without scaling */
37
#bg1.center {
38
    background-size: auto;
39
    background-position: center;
40
    background-repeat: no-repeat;
41
}
42

43
/* This is the main flex container for the entire drawer */
44
.drawer-content.openDrawer.bg-drawer-layout {
45
    display: flex;
46
}
47

48
.bg-drawer-layout {
49
    flex-direction: column;
50
    padding: 0;
51
}
52

53
#bg-header-fixed {
54
    flex-shrink: 0;
55
    padding: 5px;
56
    background-color: var(--SmartThemeBlurTintColor);
57
    border-bottom: 1px solid var(--SmartThemeBorderColor);
58
    width: 100%;
59
}
60

61
.bg-header-row-1,
62
.bg-header-row-2 {
63
    display: flex;
64
    gap: 5px;
65
    width: 100%;
66
    align-items: baseline;
67
}
68

69
/* Control buttons in header */
70
.heading-container-with-controls {
71
    position: relative;
72
}
73

74
.heading-container-with-controls .heading-text {
75
    margin: 10px 0;
76
}
77

78
.heading-container-with-controls .heading-controls {
79
    position: absolute;
80
    right: 5px;
81
    top: 50%;
82
    transform: translateY(-50%);
83
    display: flex;
84
    gap: 5px;
85
}
86

87
#bg_menu_content,
88
#bg_custom_content {
89
    display: grid;
90
    gap: 5px;
91
    width: 100%;
92
    grid-template-columns: repeat(var(--bg-thumb-columns, 5), 1fr);
93
}
94

95
#bg-filter {
96
    font-size: calc(var(--mainFontSize) * 0.95);
97
}
98

99
#bg-sort {
100
    width: auto;
101
    max-width: 6em;
102
    flex-shrink: 0;
103
}
104

105
/* Thumbnails */
106
.bg_example:hover .BGSampleTitle {
107
    opacity: 1;
108
}
109

110
.bg_example .mobile-only-menu-toggle,
111
.bg_folder_tile .mobile-only-menu-toggle {
112
    display: none;
113
}
114

115
.bg_example {
116
    cursor: pointer;
117
    box-shadow: 0 0 7px var(--black50a);
118
    position: relative;
119
    overflow: hidden;
120
    border-radius: 8px;
121
    border: 0px solid transparent;
122
    outline: 2px solid var(--SmartThemeBorderColor);
123
    outline-offset: -1px;
124

125
    height: auto;
126
    aspect-ratio: 16 / 9;
127
}
128

129
.bg_example:focus-visible {
130
    outline-offset: inherit;
131
    outline-color: var(--interactable-outline-color);
132
}
133

134
.bg_example.locked-background {
135
    outline: 2px solid var(--golden);
136
    outline-offset: 0;
137
}
138

139
.bg_example.locked-background::after,
140
.bg_example.selected-background::before,
141
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
142
    font-family: 'Font Awesome 6 Free';
143
    font-weight: 900;
144
    position: absolute;
145
    z-index: 4;
146
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
147
    pointer-events: none;
148
}
149

150
.bg_example.selected-background::before,
151
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
152
    content: '\f00c';
153
    top: 5px;
154
    color: var(--white100);
155
    font-size: calc(var(--mainFontSize) * 0.9);
156
}
157

158
.bg_example.locked-background::after {
159
    content: '\f023';
160
    bottom: 5px;
161
    right: 5px;
162
    color: var(--golden);
163
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
164
    font-size: calc(var(--mainFontSize) * 0.8);
165
}
166

167
.bg_example:not(.locked-background) .jg-unlock,
168
.bg_example.locked-background .jg-lock {
169
    display: none;
170
}
171

172
.bg_example.selected-background {
173
    outline: 2px solid white;
174
    outline-offset: 0;
175
}
176

177
.bg_example.selected-background::before {
178
    left: 5px;
179
}
180

181
#bg_selection_mode_button.active {
182
    color: var(--golden);
183
}
184

185
#bg_group_select_count {
186
    font-weight: 700;
187
}
188

189
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example .jg-menu {
190
    display: none;
191
}
192

193
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected {
194
    outline: 2px solid var(--interactable-outline-color);
195
    outline-offset: 0;
196
}
197

198
#Backgrounds.bg-selection-mode #bg_menu_content .bg_example.folder-group-selected::before {
199
    right: 5px;
200
}
201

202
.bg_example .jg-menu {
203
    display: flex;
204
    position: absolute;
205
    top: 2px;
206
    right: 2px;
207
    background-color: rgba(0, 0, 0, 0.5);
208
    border-radius: 5px;
209
    padding: 3px 3px;
210
    z-index: 3;
211
    backdrop-filter: blur(4px);
212
    border: 1px solid var(--SmartThemeBorderColor);
213
    justify-items: center;
214
    align-items: center;
215

216
    opacity: 0;
217
    visibility: hidden;
218
    transform: scale(0.9);
219
    transform-origin: center;
220
    transition: opacity var(--animation-duration) ease-out, visibility var(--animation-duration) ease-out, transform var(--animation-duration) ease-out;
221
}
222

223
.bg_example:hover .jg-menu,
224
.bg_example:focus-within .jg-menu {
225
    opacity: 1;
226
    visibility: visible;
227
    transform: scale(1);
228
}
229

230
.bg_example .jg-button {
231
    display: flex;
232
    width: 24px;
233
    height: 24px;
234
    align-items: center;
235
    justify-content: center;
236
    color: white;
237
    padding: 5px;
238
    font-size: 1.1em;
239
    border-radius: 5px;
240
    transition: background-color var(--animation-duration) ease;
241
}
242

243
.bg_example .jg-button:hover {
244
    background-color: rgba(255, 255, 255, 0.2);
245
}
246

247
/* Scroll-to-Top Button */
248
#bg-scroll-top {
249
    position: absolute;
250
    bottom: 20px;
251
    right: 20px;
252
    width: 42px;
253
    height: 42px;
254
    background: var(--SmartThemeBlurTintColor);
255
    color: var(--SmartThemeBodyColor);
256
    border: 1px solid var(--SmartThemeBorderColor);
257
    border-radius: 50%;
258
    cursor: pointer;
259
    z-index: 10;
260
    font-size: 18px;
261
    display: inline-flex;
262
    align-items: center;
263
    justify-content: center;
264
    opacity: 0;
265
    transition: opacity var(--animation-duration) ease;
266
    pointer-events: none;
267
}
268

269
#bg-scroll-top.visible {
270
    opacity: 1;
271
    pointer-events: auto;
272
}
273

274
#bg-scroll-top:hover {
275
    filter: brightness(150%);
276
    outline: 1px solid var(--interactable-outline-color);
277
}
278

279
#bg-scroll-top .fa-solid {
280
    margin: 0;
281
    padding: 0;
282
    line-height: 1;
283
}
284

285
.thumbnail-clipper {
286
    position: absolute;
287
    top: -2px;
288
    left: -2px;
289
    right: -2px;
290
    bottom: -2px;
291
    overflow: hidden;
292
    border-radius: inherit;
293
    background-size: cover;
294
    background-position: center;
295
}
296

297
.bg_example:not([custom="true"]) .jg-copy,
298
.bg_example[custom="true"] .jg-edit {
299
    display: none;
300
}
301

302
/* Thumbnail Title */
303
.bg_example .BGSampleTitle {
304
    position: absolute;
305
    bottom: 0;
306
    left: 0;
307
    right: 0;
308
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
309
    color: var(--SmartThemeBodyColor);
310
    font-size: 0.9em;
311
    font-weight: 600;
312
    padding: 0px 6px 2px;
313
    text-align: center;
314
    white-space: nowrap;
315
    overflow: hidden;
316
    text-overflow: ellipsis;
317
    opacity: 0;
318
    transition: opacity var(--animation-duration) ease-in-out;
319
    pointer-events: none;
320
    border-radius: 0 0 8px 8px;
321
}
322

323
.bg_example:hover .BGSampleTitle,
324
.bg_example:focus-within .BGSampleTitle {
325
    opacity: 1;
326
}
327

328
#bg_tabs {
329
    display: flex;
330
    flex-direction: column;
331
    flex-grow: 1;
332
    height: 100%;
333
    overflow-y: hidden;
334
    gap: 5px;
335
}
336

337
#bg_tabs .bg_tabs_list {
338
    display: flex;
339
    flex-direction: row;
340
    gap: 5px;
341
    background: none;
342
    border: none;
343
    margin: 5px 0;
344
    padding: 0;
345
    padding-right: 4em;
346
    position: relative;
347
}
348

349
#bg_tabs .bg_tabs_list .bg_tab_button {
350
    display: flex;
351
    align-items: center;
352
    justify-content: center;
353
    text-align: center;
354
    min-width: 8em;
355
    list-style: none;
356
    color: var(--SmartThemeBodyColor);
357
    background-color: var(--SmartThemeBlurTintColor);
358
    border: 1px solid var(--SmartThemeBorderColor);
359
    border-radius: 5px;
360
    padding: 0;
361
    cursor: pointer;
362
    font-weight: 600;
363
    margin: 0 !important;
364
    filter: none;
365
    opacity: 0.8;
366
    transition: opacity var(--animation-duration-2x);
367
}
368

369
#bg_tabs .bg_tabs_list .bg_tab_button:hover {
370
    opacity: 1;
371
}
372

373
#bg_tabs .bg_tabs_list .bg_tab_button.ui-tabs-active {
374
    background-color: color-mix(in srgb, var(--SmartThemeQuoteColor) 33%, var(--SmartThemeBlurTintColor) 66%);
375
}
376

377
#bg_tabs.ui-widget-content {
378
    border: none !important;
379
}
380

381
#bg_tabs .bg_tabs_list::before,
382
#bg_tabs .bg_tabs_list::after {
383
    display: none;
384
}
385

386
#bg_tabs .bg_tabs_list .bg_tab_button a {
387
    width: 100%;
388
    height: 100%;
389
    padding: 3px 5px;
390
    cursor: pointer;
391
    color: var(--SmartThemeBodyColor);
392
}
393

394
#bg_tabs .bg_tab_panel {
395
    flex-grow: 1;
396
    height: 100%;
397
    overflow-y: auto;
398
    padding: 10px;
399
}
400

401
#bg_custom_content:not(:empty)~#bg_chat_hint {
402
    display: none;
403
}
404

405
.bg_folder_grid.bg_list {
406
    display: grid;
407
    gap: 5px;
408
    width: 100%;
409
    grid-template-columns: repeat(calc(var(--bg-thumb-columns, 5) + 2), 1fr);
410
    margin-bottom: 10px;
411
}
412

413
.bg_folder_grid:empty {
414
    display: none;
415
}
416

417
.bg_folder_tile {
418
    cursor: pointer;
419
    position: relative;
420
    overflow: hidden;
421
    border-radius: 8px;
422
    height: auto;
423
    aspect-ratio: 1 / 1;
424
    outline: 2px solid var(--SmartThemeBorderColor);
425
    outline-offset: -1px;
426
    box-shadow: 0 0 7px var(--black50a);
427
    display: flex;
428
    flex-direction: column;
429
    align-items: center;
430
    justify-content: center;
431
    background-color: var(--SmartThemeBlurTintColor);
432
    transition: filter var(--animation-duration) ease;
433
}
434

435
.bg_folder_tile:hover {
436
    filter: brightness(1.1);
437
}
438

439
.bg_folder_tile_cover {
440
    position: absolute;
441
    top: 0;
442
    left: 0;
443
    right: 0;
444
    bottom: 0;
445
    background-size: cover;
446
    background-position: center;
447
    border-radius: inherit;
448
}
449

450
.bg_folder_tile_overlay {
451
    position: absolute;
452
    bottom: 0;
453
    left: 0;
454
    right: 0;
455
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
456
    color: var(--SmartThemeBodyColor);
457
    padding: 6px 8px 4px;
458
    display: flex;
459
    align-items: center;
460
    gap: 5px;
461
    font-size: 0.85em;
462
    font-weight: 600;
463
    pointer-events: none;
464
    border-radius: 0 0 8px 8px;
465
}
466

467
.bg_folder_tile_overlay i {
468
    font-size: 0.9em;
469
    opacity: 0.8;
470
}
471

472
.bg_folder_tile_name {
473
    white-space: nowrap;
474
    overflow: hidden;
475
    text-overflow: ellipsis;
476
}
477

478
/* Folder tile action menu */
479
.bg_folder_tile .bg_folder_tile_menu {
480
    display: flex;
481
    position: absolute;
482
    top: 2px;
483
    right: 2px;
484
    background-color: rgba(0, 0, 0, 0.5);
485
    border-radius: 5px;
486
    padding: 3px;
487
    z-index: 3;
488
    backdrop-filter: blur(4px);
489
    border: 1px solid var(--SmartThemeBorderColor);
490
    align-items: center;
491

492
    opacity: 0;
493
    visibility: hidden;
494
    transform: scale(0.9);
495
    transform-origin: center;
496
    transition: opacity var(--animation-duration) ease-out, visibility var(--animation-duration) ease-out, transform var(--animation-duration) ease-out;
497
}
498

499
.bg_folder_tile:hover .bg_folder_tile_menu,
500
.bg_folder_tile:focus-within .bg_folder_tile_menu {
501
    opacity: 1;
502
    visibility: visible;
503
    transform: scale(1);
504
}
505

506
.bg_folder_tile .jg-button {
507
    display: flex;
508
    width: 24px;
509
    height: 24px;
510
    align-items: center;
511
    justify-content: center;
512
    color: white;
513
    padding: 5px;
514
    font-size: 1.1em;
515
    border-radius: 5px;
516
    transition: background-color var(--animation-duration) ease;
517
}
518

519
.bg_folder_tile .jg-button:hover {
520
    background-color: rgba(255, 255, 255, 0.2);
521
}
522

523
/* New Folder placeholder tile */
524
.bg_new_folder_tile {
525
    border: 2px dashed var(--SmartThemeBorderColor);
526
    outline: none;
527
    color: var(--SmartThemeBodyColor);
528
    opacity: 0.6;
529
    gap: 6px;
530
    font-size: 0.85em;
531
    font-weight: 600;
532
}
533

534
.bg_new_folder_tile:hover {
535
    opacity: 1;
536
    transform: scale(1.03);
537
}
538

539
/* Breadcrumb bar */
540
.bg_folder_breadcrumb {
541
    display: flex;
542
    align-items: center;
543
    gap: 8px;
544
    padding: 5px 0;
545
    margin-bottom: 5px;
546
}
547

548
.bg_current_folder_name {
549
    font-weight: 600;
550
    font-size: 1em;
551
    color: var(--SmartThemeBodyColor);
552
    white-space: nowrap;
553
    overflow: hidden;
554
    text-overflow: ellipsis;
555
}
556

557
#Backgrounds:not(.in-folder-view) .jg-set-cover {
558
    display: none !important;
559
}
560

561
#Backgrounds.in-folder-view .jg-set-cover {
562
    display: flex !important;
563
}
564

565
/* Hide folder actions on custom (chat-specific) backgrounds */
566
.bg_example[custom="true"] .jg-folder,
567
.bg_example[custom="true"] .jg-set-cover {
568
    display: none !important;
569
}