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