Commit | Line | Data |
---|---|---|
b8eab696 | 1 | .dialogOverlay { |
1223c43c | 2 | align-items: flex-start; |
b8eab696 AE |
3 | background-color: transparent; |
4 | bottom: 0; | |
1223c43c AE |
5 | display: flex; |
6 | justify-content: center; | |
b8eab696 | 7 | left: 0; |
1223c43c | 8 | padding: 100px 0; |
b8eab696 AE |
9 | position: fixed; |
10 | right: 0; | |
11 | top: 0; | |
12 | visibility: hidden; | |
13 | z-index: 399; | |
14 | ||
4fd01a87 | 15 | transition: visibility 0s linear .3s; |
b8eab696 AE |
16 | |
17 | &[aria-hidden=false] { | |
b8eab696 AE |
18 | visibility: visible; |
19 | ||
20 | transition-delay: 0s; | |
21 | } | |
4fd01a87 AE |
22 | |
23 | &::before { | |
24 | background-color: rgba(0, 0, 0, .4); | |
25 | bottom: 0; | |
26 | content: ""; | |
27 | display: block; | |
28 | left: 0; | |
29 | position: fixed; | |
30 | right: 0; | |
31 | top: 0; | |
32 | z-index: 100; | |
33 | } | |
b8eab696 AE |
34 | } |
35 | ||
36 | @-webkit-keyframes wcfDialog { | |
37 | 0% { visibility: visible; opacity: 0; top: 8%; } | |
38 | 100% { visibility: visible; opacity: 1; top: 10%; } | |
39 | } | |
40 | ||
41 | @-webkit-keyframes wcfDialogOut { | |
42 | 0% { visibility: visible; opacity: 1; top: 10%; } | |
43 | 100% { visibility: hidden; opacity: 0; top: 12%; } | |
44 | } | |
45 | ||
46 | .dialogContainer { | |
f2b50825 | 47 | border: 1px solid rgb(52, 152, 219); |
b8eab696 | 48 | box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3); |
b8eab696 AE |
49 | max-height: 80%; |
50 | max-width: 80%; | |
51 | min-width: 400px; | |
f2b50825 | 52 | will-change: opacity, transform; |
4fd01a87 | 53 | z-index: 200; |
b8eab696 AE |
54 | |
55 | -webkit-animation: wcfDialogOut .3s; | |
56 | -webkit-animation-fill-mode: forwards; | |
57 | ||
58 | &[aria-hidden=false] { | |
59 | -webkit-animation: wcfDialog .3s; | |
60 | -webkit-animation-fill-mode: forwards; | |
4fd01a87 AE |
61 | |
62 | & ~ .dialogContainer[aria-hidden=false] { | |
63 | z-index: 50; | |
64 | } | |
b8eab696 AE |
65 | } |
66 | ||
67 | > header { | |
f2b50825 | 68 | background-color: $wcfContentBackground; |
962f1164 | 69 | border-bottom: 1px solid $wcfContentBorderInner; |
f2b50825 | 70 | color: $wcfContentHeadlineText; |
b8eab696 | 71 | display: flex; |
4fd01a87 | 72 | padding: 10px 20px; |
b8eab696 | 73 | |
b8eab696 AE |
74 | > span { |
75 | flex: 1 auto; | |
f2b50825 | 76 | |
945f563e | 77 | @extend .wcfFontHeadline; |
b8eab696 AE |
78 | } |
79 | ||
80 | > a { | |
f2b50825 | 81 | color: $wcfContentHeadlineLink; |
b8eab696 AE |
82 | flex: 0 0 20px; |
83 | font-family: FontAwesome; | |
84 | font-size: 18px; | |
85 | text-align: right; | |
86 | text-decoration: none; | |
87 | ||
f2b50825 AE |
88 | &::before { |
89 | content: $fa-var-times; | |
b8eab696 AE |
90 | } |
91 | ||
92 | > span { | |
93 | display: none; | |
94 | } | |
95 | } | |
96 | } | |
97 | ||
98 | > .dialogContent { | |
f2b50825 AE |
99 | background-color: $wcfContentBackground; |
100 | color: $wcfContentText; | |
b8eab696 AE |
101 | overflow: auto; |
102 | ||
103 | &:not(.dialogContentNoPadding) { | |
f2b50825 | 104 | padding: 30px 20px 0 20px; |
b8eab696 | 105 | |
f2b50825 | 106 | &::after { |
b8eab696 AE |
107 | content: ""; |
108 | display: block; | |
109 | height: 10px; | |
110 | } | |
111 | ||
f2b50825 | 112 | &.dialogForm::after { |
b8eab696 AE |
113 | height: 17px; |
114 | } | |
115 | } | |
116 | ||
117 | &:not(.dialogForm) { | |
118 | border-bottom-left-radius: 3px; | |
119 | border-bottom-right-radius: 3px; | |
120 | } | |
121 | ||
122 | dl:not(.plain) { | |
123 | > dt { | |
124 | float: none; | |
b8eab696 AE |
125 | text-align: left; |
126 | width: auto !important; | |
127 | ||
128 | &:empty { | |
129 | margin-bottom: 0; | |
130 | } | |
131 | } | |
132 | ||
133 | > dd { | |
134 | margin-left: 0 !important; | |
135 | } | |
136 | } | |
137 | ||
138 | .dialogFormSubmit { | |
f2b50825 | 139 | background-color: $wcfContentBackground; |
962f1164 | 140 | border-top: 1px solid $wcfContentBorderInner; |
b8eab696 AE |
141 | bottom: 0; |
142 | left: 0; | |
143 | padding: 10px; | |
144 | position: absolute; | |
145 | right: 0; | |
146 | } | |
147 | } | |
148 | } | |
149 | ||
150 | @media only screen and (max-width: 800px) { | |
151 | } | |
152 | ||
153 | /* static dialogs */ | |
154 | .jsStaticDialogContent { | |
155 | display: none; | |
156 | } | |
157 | ||
b8eab696 AE |
158 | /* package (un-)installation */ |
159 | #packageInstallationDialogContainer > .boxHeadline { | |
160 | margin-top: 0; | |
161 | } | |
162 | ||
f2b50825 AE |
163 | @keyframes wcfSpinner { |
164 | to { transform: rotate(360deg); } | |
165 | } | |
166 | ||
b8eab696 | 167 | .spinner { |
f2b50825 AE |
168 | background-color: rgb(255, 255, 255); |
169 | border: 1px solid rgb(204, 204, 204); | |
170 | box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2); | |
171 | color: rgb(44, 62, 80); | |
b8eab696 AE |
172 | left: 50%; |
173 | opacity: 0; | |
f2b50825 | 174 | padding: 10px; |
b8eab696 AE |
175 | position: fixed; |
176 | text-align: center; | |
177 | top: 200px; | |
178 | visibility: hidden; | |
179 | z-index: 401; | |
180 | ||
181 | transform: translateX(-50%); | |
182 | ||
b8eab696 AE |
183 | transition: visibility 0s linear .1s, opacity .1s linear; |
184 | ||
185 | &.active { | |
186 | opacity: 1; | |
187 | visibility: visible; | |
188 | ||
189 | transition-delay: 0s; | |
190 | } | |
191 | ||
192 | > .icon { | |
f2b50825 AE |
193 | border: 2px solid rgb(204, 204, 204); |
194 | border-top-color: rgb(79, 129, 189); | |
195 | border-radius: 50%; | |
196 | height: 48px; | |
197 | animation: wcfSpinner .6s linear infinite; | |
198 | width: 48px; | |
199 | ||
200 | &::before { | |
201 | display: none; | |
202 | } | |
b8eab696 AE |
203 | } |
204 | ||
205 | > span:not(.icon) { | |
206 | display: block; | |
f2b50825 | 207 | margin-top: 5px; |
b8eab696 AE |
208 | } |
209 | } | |
210 | ||
211 | .systemConfirmation p { | |
f2b50825 | 212 | //padding-top: @wcfGapSmall; |
b8eab696 AE |
213 | } |
214 | ||
215 | /* notification overlay */ | |
216 | #systemNotification { | |
217 | left: 0; | |
45433290 | 218 | opacity: 0; |
b8eab696 AE |
219 | pointer-events: none; |
220 | position: fixed; | |
221 | top: 0; | |
45433290 AE |
222 | transform: translateY(-100%); |
223 | transition: visibility .2s linear .2s, transform .2s linear, opacity .2s linear; | |
224 | visibility: hidden; | |
b8eab696 AE |
225 | width: 100%; |
226 | z-index: 460; | |
227 | ||
45433290 AE |
228 | &.active { |
229 | opacity: 1; | |
230 | transform: translateY(0%); | |
231 | transition-delay: 0s; | |
232 | visibility: visible; | |
233 | } | |
234 | ||
b8eab696 AE |
235 | > p { |
236 | border-top-left-radius: 0; | |
237 | border-top-right-radius: 0; | |
238 | border-top-width: 0; | |
239 | cursor: pointer; | |
240 | display: table; | |
241 | margin: 0 auto; | |
242 | max-width: 80%; | |
243 | pointer-events: auto; | |
244 | ||
f2b50825 | 245 | //.userSelectNone; |
b8eab696 | 246 | } |
45433290 | 247 | } |