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; | |
254e47df | 9 | transition: opacity .12s linear, visibility 0s linear .3s; |
b8eab696 | 10 | visibility: hidden; |
254e47df | 11 | will-change: opacity; |
b8eab696 AE |
12 | z-index: 399; |
13 | ||
8a0b323e | 14 | @include screen-sm-up { |
d9bce95e AE |
15 | padding: 100px 0; |
16 | } | |
17 | ||
b8eab696 | 18 | &[aria-hidden=false] { |
254e47df | 19 | opacity: 1; |
b8eab696 | 20 | transition-delay: 0s; |
254e47df | 21 | visibility: visible; |
b8eab696 | 22 | } |
4fd01a87 AE |
23 | |
24 | &::before { | |
25 | background-color: rgba(0, 0, 0, .4); | |
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 AE |
37 | @keyframes wcfDialog { |
38 | 0% { visibility: visible; top: 8%; } | |
39 | 100% { visibility: visible; top: 10%; } | |
b8eab696 AE |
40 | } |
41 | ||
254e47df AE |
42 | @keyframes wcfDialogOut { |
43 | 0% { visibility: visible; top: 10%; } | |
44 | 100% { visibility: hidden; top: 12%; } | |
b8eab696 AE |
45 | } |
46 | ||
47 | .dialogContainer { | |
4fd01a87 | 48 | z-index: 200; |
b8eab696 | 49 | |
8a0b323e | 50 | @include screen-xs { |
d9bce95e AE |
51 | left: 0 !important; |
52 | position: fixed; | |
53 | right: 0 !important; | |
54 | top: 0 !important; | |
55 | } | |
56 | ||
8a0b323e | 57 | @include screen-sm-up { |
d9bce95e | 58 | animation: wcfDialogOut .3s; |
254e47df | 59 | animation-fill-mode: forwards; |
d9bce95e AE |
60 | box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3); |
61 | left: 50%; | |
62 | max-height: 80%; | |
63 | max-width: 80%; | |
8fde9708 | 64 | min-width: 500px; |
d9bce95e AE |
65 | position: absolute; |
66 | transform: translateX(-50%); | |
4fd01a87 | 67 | |
d9bce95e AE |
68 | &[aria-hidden=false] { |
69 | animation: wcfDialog .3s; | |
70 | animation-fill-mode: forwards; | |
4fd01a87 | 71 | } |
b8eab696 AE |
72 | } |
73 | ||
a051b5a7 MS |
74 | &[aria-hidden=false] ~ .dialogContainer[aria-hidden=false], |
75 | &[aria-hidden=false] ~ .dialogContainer[aria-hidden=true]{ | |
d9bce95e AE |
76 | z-index: 50; |
77 | } | |
78 | ||
b8eab696 | 79 | > header { |
254e47df AE |
80 | background-color: $wcfHeaderBackground; |
81 | color: $wcfHeaderText; | |
b8eab696 | 82 | display: flex; |
4fd01a87 | 83 | padding: 10px 20px; |
b8eab696 | 84 | |
b8eab696 AE |
85 | > span { |
86 | flex: 1 auto; | |
f2b50825 | 87 | |
5908f54f | 88 | @include wcfFontHeadline; |
b8eab696 AE |
89 | } |
90 | ||
f91462ea MW |
91 | > .dialogCloseButton { |
92 | align-self: center; | |
93 | flex: 0 0 auto; | |
a051b5a7 | 94 | |
f91462ea | 95 | &:hover > .icon { |
254e47df AE |
96 | color: $wcfHeaderLinkActive; |
97 | } | |
98 | ||
f91462ea MW |
99 | > .icon { |
100 | color: $wcfHeaderLink; | |
b8eab696 AE |
101 | } |
102 | } | |
103 | } | |
104 | ||
105 | > .dialogContent { | |
f2b50825 | 106 | background-color: $wcfContentBackground; |
b8eab696 AE |
107 | overflow: auto; |
108 | ||
109 | &:not(.dialogContentNoPadding) { | |
f216765b | 110 | @include screen-sm-down { |
d9bce95e AE |
111 | padding: 10px; |
112 | } | |
113 | ||
f216765b | 114 | @include screen-md-up { |
a9ce4ee0 | 115 | padding: 30px 20px 10px 20px; |
d9bce95e | 116 | } |
b8eab696 | 117 | |
f2b50825 | 118 | &::after { |
b8eab696 AE |
119 | content: ""; |
120 | display: block; | |
db47295c | 121 | height: 20px; |
b8eab696 AE |
122 | } |
123 | ||
f2b50825 | 124 | &.dialogForm::after { |
b8eab696 AE |
125 | height: 17px; |
126 | } | |
127 | } | |
128 | ||
129 | &:not(.dialogForm) { | |
130 | border-bottom-left-radius: 3px; | |
131 | border-bottom-right-radius: 3px; | |
132 | } | |
133 | ||
134 | dl:not(.plain) { | |
135 | > dt { | |
136 | float: none; | |
b8eab696 AE |
137 | text-align: left; |
138 | width: auto !important; | |
139 | ||
140 | &:empty { | |
141 | margin-bottom: 0; | |
142 | } | |
143 | } | |
144 | ||
145 | > dd { | |
146 | margin-left: 0 !important; | |
147 | } | |
148 | } | |
149 | ||
150 | .dialogFormSubmit { | |
254e47df | 151 | background-color: $wcfSidebarBackground; |
962f1164 | 152 | border-top: 1px solid $wcfContentBorderInner; |
b8eab696 AE |
153 | bottom: 0; |
154 | left: 0; | |
155 | padding: 10px; | |
156 | position: absolute; | |
157 | right: 0; | |
158 | } | |
d0f37ffb | 159 | |
f91462ea MW |
160 | .section { |
161 | margin-top: 30px; | |
162 | ||
163 | .sectionTitle { | |
5908f54f | 164 | @include wcfFontHeadline; |
f91462ea MW |
165 | } |
166 | } | |
167 | ||
d0f37ffb MW |
168 | > div { |
169 | > .section:first-child, | |
170 | > fieldset:first-child { | |
171 | margin-top: 0; | |
172 | } | |
f91462ea | 173 | |
b971793a AE |
174 | > div, |
175 | > form { | |
f91462ea MW |
176 | > .section:first-child, |
177 | > fieldset:first-child { | |
178 | margin-top: 0; | |
179 | } | |
180 | } | |
d0f37ffb | 181 | } |
b8eab696 AE |
182 | } |
183 | } | |
184 | ||
b8eab696 AE |
185 | /* static dialogs */ |
186 | .jsStaticDialogContent { | |
187 | display: none; | |
188 | } | |
189 | ||
b8eab696 | 190 | .spinner { |
f2b50825 AE |
191 | background-color: rgb(255, 255, 255); |
192 | border: 1px solid rgb(204, 204, 204); | |
193 | box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2); | |
194 | color: rgb(44, 62, 80); | |
b8eab696 AE |
195 | left: 50%; |
196 | opacity: 0; | |
f2b50825 | 197 | padding: 10px; |
b8eab696 AE |
198 | position: fixed; |
199 | text-align: center; | |
200 | top: 200px; | |
b8eab696 | 201 | transform: translateX(-50%); |
5bcef578 | 202 | transition: visibility 0s linear .12s, opacity .12s linear; |
47e76c45 AE |
203 | visibility: hidden; |
204 | z-index: 401; | |
b8eab696 AE |
205 | |
206 | &.active { | |
207 | opacity: 1; | |
208 | visibility: visible; | |
209 | ||
210 | transition-delay: 0s; | |
211 | } | |
212 | ||
b8eab696 AE |
213 | > span:not(.icon) { |
214 | display: block; | |
f2b50825 | 215 | margin-top: 5px; |
b8eab696 AE |
216 | } |
217 | } | |
218 | ||
b8eab696 AE |
219 | /* notification overlay */ |
220 | #systemNotification { | |
221 | left: 0; | |
45433290 | 222 | opacity: 0; |
b8eab696 AE |
223 | pointer-events: none; |
224 | position: fixed; | |
225 | top: 0; | |
45433290 | 226 | transform: translateY(-100%); |
5bcef578 | 227 | transition: visibility .12s linear .12s, transform .12s linear, opacity .12s linear; |
45433290 | 228 | visibility: hidden; |
b8eab696 AE |
229 | width: 100%; |
230 | z-index: 460; | |
231 | ||
45433290 AE |
232 | &.active { |
233 | opacity: 1; | |
234 | transform: translateY(0%); | |
235 | transition-delay: 0s; | |
236 | visibility: visible; | |
237 | } | |
238 | ||
b8eab696 AE |
239 | > p { |
240 | border-top-left-radius: 0; | |
241 | border-top-right-radius: 0; | |
242 | border-top-width: 0; | |
243 | cursor: pointer; | |
244 | display: table; | |
245 | margin: 0 auto; | |
246 | max-width: 80%; | |
247 | pointer-events: auto; | |
248 | ||
f2b50825 | 249 | //.userSelectNone; |
b8eab696 | 250 | } |
45433290 | 251 | } |
d0a27e5f MW |
252 | |
253 | /* highlight objects in confirmation messages */ | |
254 | .confirmationObject { | |
255 | font-weight: 600; | |
256 | } |