1
#preloader {
2
    position: fixed;
3
    margin: 0;
4
    padding: 0;
5
    top: 0;
6
    left: 0;
7
    z-index: 999999;
8
    width: 100vw;
9
    height: 100vh;
10
    width: 100dvw;
11
    height: 100dvh;
12
    background-color: var(--SmartThemeBlurTintColor);
13
    color: var(--SmartThemeBodyColor);
14
    /*for some reason the full screen blur does not work on iOS*/
15
    backdrop-filter: blur(30px);
16
    opacity: 1;
17
}
18

19
#load-spinner {
20
    --spinner-size: 2em;
21
    transition: all var(--animation-duration-2x) ease-out;
22
    opacity: 1;
23
    top: calc(50% - var(--spinner-size) / 2);
24
    left: calc(50% - var(--spinner-size) / 2);
25
    position: absolute;
26
    width: var(--spinner-size);
27
    height: var(--spinner-size);
28
    display: flex;
29
    align-items: center;
30
    justify-content: center;
31
}
32

33
/* Action loader toast styles */
34
.action-loader-toast {
35
    display: flex;
36
    align-items: center;
37
    gap: 10px;
38
    width: 100%;
39
}
40

41
.action-loader-message {
42
    flex: 1;
43
}
44

45
.action-loader-stop {
46
    cursor: pointer;
47
    font-size: 1.2em;
48
    opacity: 0.8;
49
    transition: opacity 0.15s ease, color 0.15s ease;
50
}
51

52
.action-loader-stop:hover {
53
    opacity: 1;
54
    color: color-mix(in srgb, currentColor 40%, #e74c3c 60%);
55
}
56

57
/* Splash screen styles for branded loading */
58
#loader.splash-screen {
59
    display: flex;
60
    flex-direction: column;
61
    align-items: center;
62
    justify-content: center;
63
    gap: 4rem;
64
    width: 100%;
65
    height: 100%;
66
    transition: all var(--animation-duration-2x) ease-out;
67
}
68

69
#loader.splash-screen #load-spinner {
70
    position: static;
71
    top: unset;
72
    left: unset;
73
}
74

75
.splash-logo {
76
    /* max original px, or 50% on mobile */
77
    width: min(150px, 50%);
78
    height: auto;
79
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
80
}
81

82
.splash-message {
83
    margin: 0;
84
    font-size: 1.25rem;
85
    font-weight: 500;
86
    opacity: 0.9;
87
    letter-spacing: 0.02em;
88
}