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 | ||
d9bce95e AE |
14 | @include large-screen-only { |
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 | |
d9bce95e AE |
50 | @include small-screen-only { |
51 | left: 0 !important; | |
52 | position: fixed; | |
53 | right: 0 !important; | |
54 | top: 0 !important; | |
55 | } | |
56 | ||
57 | @include large-screen-only { | |
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 | |
945f563e | 87 | @extend .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) { | |
d9bce95e AE |
109 | @include small-screen-only { |
110 | padding: 10px; | |
111 | } | |
112 | ||
113 | @include large-screen-only { | |
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 { | |
163 | @extend .wcfFontHeadline; | |
164 | } | |
165 | } | |
166 | ||
d0f37ffb MW |
167 | > div { |
168 | > .section:first-child, | |
169 | > fieldset:first-child { | |
170 | margin-top: 0; | |
171 | } | |
f91462ea MW |
172 | |
173 | > div { | |
174 | > .section:first-child, | |
175 | > fieldset:first-child { | |
176 | margin-top: 0; | |
177 | } | |
178 | } | |
d0f37ffb | 179 | } |
b8eab696 AE |
180 | } |
181 | } | |
182 | ||
b8eab696 AE |
183 | /* static dialogs */ |
184 | .jsStaticDialogContent { | |
185 | display: none; | |
186 | } | |
187 | ||
95961bdf | 188 | /* package (un-)installation (todo: obsolete?) */ |
b8eab696 AE |
189 | #packageInstallationDialogContainer > .boxHeadline { |
190 | margin-top: 0; | |
191 | } | |
192 | ||
193 | .spinner { | |
f2b50825 AE |
194 | background-color: rgb(255, 255, 255); |
195 | border: 1px solid rgb(204, 204, 204); | |
196 | box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2); | |
197 | color: rgb(44, 62, 80); | |
b8eab696 AE |
198 | left: 50%; |
199 | opacity: 0; | |
f2b50825 | 200 | padding: 10px; |
b8eab696 AE |
201 | position: fixed; |
202 | text-align: center; | |
203 | top: 200px; | |
b8eab696 | 204 | transform: translateX(-50%); |
b8eab696 | 205 | transition: visibility 0s linear .1s, opacity .1s linear; |
47e76c45 AE |
206 | visibility: hidden; |
207 | z-index: 401; | |
b8eab696 AE |
208 | |
209 | &.active { | |
210 | opacity: 1; | |
211 | visibility: visible; | |
212 | ||
213 | transition-delay: 0s; | |
214 | } | |
215 | ||
b8eab696 AE |
216 | > span:not(.icon) { |
217 | display: block; | |
f2b50825 | 218 | margin-top: 5px; |
b8eab696 AE |
219 | } |
220 | } | |
221 | ||
b8eab696 AE |
222 | /* notification overlay */ |
223 | #systemNotification { | |
224 | left: 0; | |
45433290 | 225 | opacity: 0; |
b8eab696 AE |
226 | pointer-events: none; |
227 | position: fixed; | |
228 | top: 0; | |
45433290 AE |
229 | transform: translateY(-100%); |
230 | transition: visibility .2s linear .2s, transform .2s linear, opacity .2s linear; | |
231 | visibility: hidden; | |
b8eab696 AE |
232 | width: 100%; |
233 | z-index: 460; | |
234 | ||
45433290 AE |
235 | &.active { |
236 | opacity: 1; | |
237 | transform: translateY(0%); | |
238 | transition-delay: 0s; | |
239 | visibility: visible; | |
240 | } | |
241 | ||
b8eab696 AE |
242 | > p { |
243 | border-top-left-radius: 0; | |
244 | border-top-right-radius: 0; | |
245 | border-top-width: 0; | |
246 | cursor: pointer; | |
247 | display: table; | |
248 | margin: 0 auto; | |
249 | max-width: 80%; | |
250 | pointer-events: auto; | |
251 | ||
f2b50825 | 252 | //.userSelectNone; |
b8eab696 | 253 | } |
45433290 | 254 | } |