1
@import url('/lib/dialog-polyfill.css');
2
@import url('./popup-safari-fix.css');
3

4
dialog {
5
    color: var(--SmartThemeBodyColor);
6
}
7

8
/* Closed state of the dialog */
9
.popup {
10
    width: 500px;
11
    text-align: center;
12
    box-shadow: 0px 0px 14px var(--black70a);
13
    border: 1px solid var(--SmartThemeBorderColor);
14
    padding: 4px 14px;
15
    background-color: var(--SmartThemeBlurTintColor);
16
    border-radius: 10px;
17
    display: flex;
18
    flex-direction: column;
19

20
    max-height: calc(100dvh - 2em);
21
    max-width: calc(100dvw - 2em);
22
    min-height: fit-content;
23

24
    /* Overflow visible so elements (like toasts) can appear outside of the dialog. '.popup-body' is hiding overflow for the real content. */
25
    overflow: visible;
26

27
    /* Fix weird animation issue with font-scaling during popup open */
28
    backface-visibility: hidden;
29
    -webkit-font-smoothing: subpixel-antialiased;
30

31
    /* Variables setup */
32
    --popup-animation-speed: var(--animation-duration-slow);
33
}
34

35
/** Popup styles applied to the main popup */
36
.popup--animation-fast {
37
    --popup-animation-speed: var(--animation-duration);
38
}
39

40
.popup--animation-slow {
41
    --popup-animation-speed: var(--animation-duration-slow);
42
}
43

44
.popup--animation-none {
45
    --popup-animation-speed: 0ms;
46
}
47

48
/* Styling of main popup elements */
49
.popup .popup-body {
50
    display: flex;
51
    flex-direction: column;
52
    overflow: hidden;
53
    width: min(100%, 100vw);
54
    height: 100%;
55
    padding: 1px;
56
}
57

58
.popup:not(:has(.img_enlarged_container)) .popup-body {
59
    max-height: 95dvh;
60
}
61

62
.popup .popup-content {
63
    margin-top: 10px;
64
    padding: 0 8px;
65
    overflow: hidden;
66
    flex-grow: 1;
67
}
68

69
.popup .popup-content h3:first-child {
70
    /* No double spacing for the first heading needed, the .popup-content already has margin */
71
    margin-top: 0px;
72
}
73

74
.popup.vertical_scrolling_dialogue_popup .popup-content {
75
    overflow-y: auto;
76
}
77

78
.popup.horizontal_scrolling_dialogue_popup .popup-content {
79
    overflow-x: auto;
80
}
81

82
.popup.left_aligned_dialogue_popup .popup-content {
83
    text-align: start;
84
}
85

86
/* Opening animation */
87
.popup[opening] {
88
    animation: pop-in var(--popup-animation-speed) ease-in-out;
89
}
90

91
.popup[opening]::backdrop {
92
    animation: fade-in var(--popup-animation-speed) ease-in-out;
93
}
94

95
/* Fix toast container snapping into the backdrop while the animation is running */
96
.popup[opening] #toast-container {
97
    visibility: hidden;
98
}
99

100
/* Open state of the dialog */
101
.popup[open] {
102
    color: var(--SmartThemeBodyColor);
103
}
104

105
.popup[open]::backdrop {
106
    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
107
    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
108
    background-color: var(--black30a);
109
}
110

111
body.no-blur .popup[open]::backdrop {
112
    backdrop-filter: none;
113
    -webkit-backdrop-filter: none;
114
}
115

116
/* Closing animation */
117
.popup[closing] {
118
    animation: pop-out var(--popup-animation-speed) ease-in-out;
119
}
120

121
.popup[closing]::backdrop {
122
    animation: fade-out var(--popup-animation-speed) ease-in-out;
123
}
124

125
/* Edge inset to match Toastr default spacing */
126
:root {
127
    --toast-edge: 12px;
128
}
129

130
.popup #toast-container {
131
    /* Popups are centered by default; toasts should not be */
132
    text-align: left;
133
}
134

135
/* Per-position position adjustments caused by the top bar, inside the popup */
136
.popup #toast-container.toast-top-left {
137
    top: calc(var(--toast-edge) + var(--topBarBlockSize));
138
}
139

140
.popup #toast-container.toast-top-center {
141
    /* toastr in core does not have a top offset on center, so we don't do that either in popups */
142
    top: var(--topBarBlockSize);
143
}
144

145
.popup #toast-container.toast-top-right {
146
    top: calc(var(--toast-edge) + var(--topBarBlockSize));
147
}
148

149
.popup-crop-wrap {
150
    margin: 10px auto;
151
    max-height: 75vh;
152
    max-height: 75dvh;
153
    max-width: 100%;
154
}
155

156
.popup-crop-wrap img {
157
    max-width: 100%;
158
    /* This rule is very important, please do not ignore this! */
159
}
160

161
.popup-inputs {
162
    margin-top: 10px;
163
    font-size: smaller;
164
}
165

166
.popup-inputs label span {
167
    /* Make the title of the custom inputs a bit darker, but keep their text at default opacity. */
168
    opacity: 0.7;
169
}
170

171
.popup-input {
172
    margin-top: 10px;
173
}
174

175
.popup-controls {
176
    margin-top: 10px;
177
    display: flex;
178
    align-self: center;
179
    gap: 20px;
180
}
181

182
.menu_button.menu_button_default {
183
    box-shadow: 0 0 5px var(--white20a);
184
}
185

186
.menu_button.popup-button-ok {
187
    background-color: var(--crimson70a);
188
}
189

190
.menu_button.popup-button-ok:hover {
191
    background-color: var(--crimson-hover);
192
}
193

194
.popup-controls .menu_button {
195
    /* Popup buttons should not scale to smallest size, otherwise they will always break to multiline if multiple words */
196
    width: unset;
197

198
    /* Fix weird animation issue with fonts on brightness filter */
199
    backface-visibility: hidden;
200
    transform: translateZ(0);
201
    -webkit-font-smoothing: subpixel-antialiased;
202
}
203

204
.popup-controls .menu_button:hover:focus-visible {
205
    filter: brightness(1.3) saturate(1.3);
206
}
207

208
.popup .popup-button-close {
209
    position: absolute;
210
    top: -6px;
211
    right: -6px;
212
    width: 24px;
213
    height: 24px;
214
    font-size: 20px;
215
    padding: 2px 3px 3px 2px;
216

217
    filter: brightness(0.8);
218

219
    /* Fix weird animation issue with font-scaling during popup open */
220
    backface-visibility: hidden;
221
}