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