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