Commit | Line | Data |
---|---|---|
b8eab696 AE |
1 | .dialogOverlay { |
2 | background-color: transparent; | |
3 | bottom: 0; | |
4 | left: 0; | |
254e47df | 5 | opacity: 0; |
b8eab696 AE |
6 | position: fixed; |
7 | right: 0; | |
8 | top: 0; | |
8a52619a | 9 | transition: opacity 0.12s linear, visibility 0s linear 0.3s; |
b8eab696 | 10 | visibility: hidden; |
254e47df | 11 | will-change: opacity; |
b8eab696 | 12 | z-index: 399; |
8a52619a | 13 | |
8a0b323e | 14 | @include screen-sm-up { |
d9bce95e AE |
15 | padding: 100px 0; |
16 | } | |
8a52619a TD |
17 | |
18 | &[aria-hidden="false"] { | |
254e47df | 19 | opacity: 1; |
b8eab696 | 20 | transition-delay: 0s; |
254e47df | 21 | visibility: visible; |
b8eab696 | 22 | } |
8a52619a | 23 | |
4fd01a87 | 24 | &::before { |
8a52619a | 25 | background-color: rgba(0, 0, 0, 0.4); |
4fd01a87 AE |
26 | bottom: 0; |
27 | content: ""; | |
28 | display: block; | |
29 | left: 0; | |
30 | position: fixed; | |
31 | right: 0; | |
32 | top: 0; | |
33 | z-index: 100; | |
34 | } | |
b8eab696 AE |
35 | } |
36 | ||
254e47df | 37 | @keyframes wcfDialog { |
8a52619a TD |
38 | 0% { |
39 | visibility: visible; | |
40 | top: 8%; | |
41 | } | |
42 | 100% { | |
43 | visibility: visible; | |
44 | top: 10%; | |
45 | } | |
b8eab696 AE |
46 | } |
47 | ||
254e47df | 48 | @keyframes wcfDialogOut { |
8a52619a TD |
49 | 0% { |
50 | visibility: visible; | |
51 | top: 10%; | |
52 | } | |
53 | 100% { | |
54 | visibility: hidden; | |
55 | top: 12%; | |
56 | } | |
b8eab696 AE |
57 | } |
58 | ||
59 | .dialogContainer { | |
4fd01a87 | 60 | z-index: 200; |
8a52619a | 61 | |
8a0b323e | 62 | @include screen-xs { |
d9bce95e AE |
63 | left: 0 !important; |
64 | position: fixed; | |
65 | right: 0 !important; | |
66 | top: 0 !important; | |
67 | } | |
8a52619a | 68 | |
8a0b323e | 69 | @include screen-sm-up { |
8a52619a | 70 | animation: wcfDialogOut 0.3s; |
254e47df | 71 | animation-fill-mode: forwards; |
8a52619a | 72 | box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.3); |
d9bce95e AE |
73 | left: 50%; |
74 | max-height: 80%; | |
75 | max-width: 80%; | |
8fde9708 | 76 | min-width: 500px; |
d9bce95e AE |
77 | position: absolute; |
78 | transform: translateX(-50%); | |
8a52619a TD |
79 | |
80 | &[aria-hidden="false"] { | |
81 | animation: wcfDialog 0.3s; | |
d9bce95e | 82 | animation-fill-mode: forwards; |
4fd01a87 | 83 | } |
b8eab696 | 84 | } |
8a52619a TD |
85 | |
86 | &[aria-hidden="true"] { | |
51231fc4 AE |
87 | /* Child elements with `visibility: visible` will not be visually rendered, but pointer events are recognized. */ |
88 | pointer-events: none; | |
4ec68ae9 MS |
89 | visibility: hidden; |
90 | } | |
8a52619a TD |
91 | |
92 | &[aria-hidden="false"] ~ .dialogContainer[aria-hidden="false"] { | |
d9bce95e AE |
93 | z-index: 50; |
94 | } | |
8a52619a | 95 | |
b8eab696 | 96 | > header { |
254e47df AE |
97 | background-color: $wcfHeaderBackground; |
98 | color: $wcfHeaderText; | |
b8eab696 | 99 | display: flex; |
8a52619a | 100 | |
58f4c287 MW |
101 | @include screen-sm-down { |
102 | padding: 10px; | |
103 | } | |
8a52619a | 104 | |
58f4c287 MW |
105 | @include screen-md-up { |
106 | padding: 10px 20px; | |
107 | } | |
8a52619a | 108 | |
b8eab696 AE |
109 | > span { |
110 | flex: 1 auto; | |
8a52619a | 111 | |
5908f54f | 112 | @include wcfFontHeadline; |
b8eab696 | 113 | } |
8a52619a | 114 | |
f91462ea MW |
115 | > .dialogCloseButton { |
116 | align-self: center; | |
117 | flex: 0 0 auto; | |
8a52619a | 118 | |
f91462ea | 119 | &:hover > .icon { |
254e47df AE |
120 | color: $wcfHeaderLinkActive; |
121 | } | |
8a52619a | 122 | |
f91462ea MW |
123 | > .icon { |
124 | color: $wcfHeaderLink; | |
b8eab696 AE |
125 | } |
126 | } | |
127 | } | |
8a52619a | 128 | |
b8eab696 | 129 | > .dialogContent { |
f2b50825 | 130 | background-color: $wcfContentBackground; |
b8eab696 | 131 | overflow: auto; |
8a52619a | 132 | |
17514a91 | 133 | // do not use `-webkit-overflow-scrolling` as it will cut off content in iOS Safari |
8a52619a | 134 | |
b8eab696 | 135 | &:not(.dialogContentNoPadding) { |
f216765b | 136 | @include screen-sm-down { |
d9bce95e AE |
137 | padding: 10px; |
138 | } | |
8a52619a | 139 | |
f216765b | 140 | @include screen-md-up { |
a9ce4ee0 | 141 | padding: 30px 20px 10px 20px; |
d9bce95e | 142 | } |
8a52619a | 143 | |
f2b50825 | 144 | &::after { |
b8eab696 AE |
145 | content: ""; |
146 | display: block; | |
db47295c | 147 | height: 20px; |
b8eab696 | 148 | } |
8a52619a | 149 | |
f2b50825 | 150 | &.dialogForm::after { |
b8eab696 AE |
151 | height: 17px; |
152 | } | |
153 | } | |
8a52619a | 154 | |
b8eab696 AE |
155 | &:not(.dialogForm) { |
156 | border-bottom-left-radius: 3px; | |
157 | border-bottom-right-radius: 3px; | |
158 | } | |
8a52619a | 159 | |
b8eab696 AE |
160 | dl:not(.plain) { |
161 | > dt { | |
162 | float: none; | |
b8eab696 AE |
163 | text-align: left; |
164 | width: auto !important; | |
8a52619a | 165 | |
b8eab696 AE |
166 | &:empty { |
167 | margin-bottom: 0; | |
168 | } | |
169 | } | |
8a52619a | 170 | |
b8eab696 AE |
171 | > dd { |
172 | margin-left: 0 !important; | |
173 | } | |
174 | } | |
8a52619a | 175 | |
b8eab696 | 176 | .dialogFormSubmit { |
254e47df | 177 | background-color: $wcfSidebarBackground; |
962f1164 | 178 | border-top: 1px solid $wcfContentBorderInner; |
b8eab696 AE |
179 | bottom: 0; |
180 | left: 0; | |
181 | padding: 10px; | |
182 | position: absolute; | |
183 | right: 0; | |
8a52619a | 184 | |
d6d86a03 AE |
185 | @include screen-sm-up { |
186 | /* this reverts the negative margin introduced by `.formSubmit` */ | |
187 | margin-bottom: 0; | |
188 | padding-bottom: 0; | |
189 | } | |
b8eab696 | 190 | } |
8a52619a | 191 | |
f91462ea MW |
192 | .section { |
193 | margin-top: 30px; | |
8a52619a | 194 | |
f91462ea | 195 | .sectionTitle { |
5908f54f | 196 | @include wcfFontHeadline; |
f91462ea MW |
197 | } |
198 | } | |
8a52619a | 199 | |
d0f37ffb MW |
200 | > div { |
201 | > .section:first-child, | |
202 | > fieldset:first-child { | |
203 | margin-top: 0; | |
204 | } | |
8a52619a | 205 | |
b971793a | 206 | > div, |
036f5a70 | 207 | > section, |
b971793a | 208 | > form { |
f91462ea MW |
209 | > .section:first-child, |
210 | > fieldset:first-child { | |
211 | margin-top: 0; | |
212 | } | |
213 | } | |
d0f37ffb | 214 | } |
8a52619a | 215 | |
68e46ef2 AE |
216 | /* Chrome and Safari use heavy anti-aliasing when the dialog's width |
217 | cannot be evenly divided, causing the whole text to become blurry */ | |
47aa8f20 AE |
218 | &.jsWebKitFractionalPixelFix { |
219 | backface-visibility: hidden; | |
68e46ef2 | 220 | } |
b8eab696 AE |
221 | } |
222 | } | |
223 | ||
b8eab696 AE |
224 | /* static dialogs */ |
225 | .jsStaticDialogContent { | |
226 | display: none; | |
227 | } | |
228 | ||
b8eab696 | 229 | .spinner { |
f2b50825 AE |
230 | background-color: rgb(255, 255, 255); |
231 | border: 1px solid rgb(204, 204, 204); | |
8a52619a | 232 | box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.2); |
f2b50825 | 233 | color: rgb(44, 62, 80); |
b8eab696 AE |
234 | left: 50%; |
235 | opacity: 0; | |
f2b50825 | 236 | padding: 10px; |
b8eab696 AE |
237 | position: fixed; |
238 | text-align: center; | |
239 | top: 200px; | |
b8eab696 | 240 | transform: translateX(-50%); |
8a52619a | 241 | transition: visibility 0s linear 0.12s, opacity 0.12s linear; |
47e76c45 AE |
242 | visibility: hidden; |
243 | z-index: 401; | |
8a52619a | 244 | |
b8eab696 AE |
245 | &.active { |
246 | opacity: 1; | |
247 | visibility: visible; | |
8a52619a | 248 | |
b8eab696 AE |
249 | transition-delay: 0s; |
250 | } | |
8a52619a | 251 | |
b8eab696 AE |
252 | > span:not(.icon) { |
253 | display: block; | |
f2b50825 | 254 | margin-top: 5px; |
b8eab696 AE |
255 | } |
256 | } | |
257 | ||
b8eab696 AE |
258 | /* notification overlay */ |
259 | #systemNotification { | |
260 | left: 0; | |
45433290 | 261 | opacity: 0; |
b8eab696 AE |
262 | pointer-events: none; |
263 | position: fixed; | |
264 | top: 0; | |
45433290 | 265 | transform: translateY(-100%); |
8a52619a | 266 | transition: visibility 0.12s linear 0.12s, transform 0.12s linear, opacity 0.12s linear; |
45433290 | 267 | visibility: hidden; |
b8eab696 AE |
268 | width: 100%; |
269 | z-index: 460; | |
8a52619a | 270 | |
45433290 AE |
271 | &.active { |
272 | opacity: 1; | |
273 | transform: translateY(0%); | |
274 | transition-delay: 0s; | |
275 | visibility: visible; | |
276 | } | |
8a52619a | 277 | |
b8eab696 AE |
278 | > p { |
279 | border-top-left-radius: 0; | |
280 | border-top-right-radius: 0; | |
281 | border-top-width: 0; | |
282 | cursor: pointer; | |
283 | display: table; | |
284 | margin: 0 auto; | |
285 | max-width: 80%; | |
286 | pointer-events: auto; | |
8a52619a | 287 | |
f2b50825 | 288 | //.userSelectNone; |
b8eab696 | 289 | } |
45433290 | 290 | } |
d0a27e5f MW |
291 | |
292 | /* highlight objects in confirmation messages */ | |
293 | .confirmationObject { | |
294 | font-weight: 600; | |
295 | } |