2 background-color: transparent;
9 transition: opacity .12s linear, visibility 0s linear .3s;
14 @include screen-sm-up {
18 &[aria-hidden=false] {
25 background-color: rgba(0, 0, 0, .4);
37 @keyframes wcfDialog {
38 0% { visibility: visible; top: 8%; }
39 100% { visibility: visible; top: 10%; }
42 @keyframes wcfDialogOut {
43 0% { visibility: visible; top: 10%; }
44 100% { visibility: hidden; top: 12%; }
57 @include screen-sm-up {
58 animation: wcfDialogOut .3s;
59 animation-fill-mode: forwards;
60 box-shadow: 0 1px 15px 0 rgba(0, 0, 0, .3);
66 transform: translateX(-50%);
68 &[aria-hidden=false] {
69 animation: wcfDialog .3s;
70 animation-fill-mode: forwards;
75 /* Child elements with `visibility: visible` will not be visually rendered, but pointer events are recognized. */
80 &[aria-hidden=false] ~ .dialogContainer[aria-hidden=false] {
85 background-color: $wcfHeaderBackground;
86 color: $wcfHeaderText;
89 @include screen-sm-down {
93 @include screen-md-up {
100 @include wcfFontHeadline;
103 > .dialogCloseButton {
108 color: $wcfHeaderLinkActive;
112 color: $wcfHeaderLink;
118 background-color: $wcfContentBackground;
121 // do not use `-webkit-overflow-scrolling` as it will cut off content in iOS Safari
123 &:not(.dialogContentNoPadding) {
124 @include screen-sm-down {
128 @include screen-md-up {
129 padding: 30px 20px 10px 20px;
138 &.dialogForm::after {
144 border-bottom-left-radius: 3px;
145 border-bottom-right-radius: 3px;
152 width: auto !important;
160 margin-left: 0 !important;
165 background-color: $wcfSidebarBackground;
166 border-top: 1px solid $wcfContentBorderInner;
173 @include screen-sm-up {
174 /* this reverts the negative margin introduced by `.formSubmit` */
184 @include wcfFontHeadline;
189 > .section:first-child,
190 > fieldset:first-child {
197 > .section:first-child,
198 > fieldset:first-child {
204 /* Chrome and Safari use heavy anti-aliasing when the dialog's width
205 cannot be evenly divided, causing the whole text to become blurry */
206 &.jsWebKitFractionalPixelFix {
207 backface-visibility: hidden;
213 .jsStaticDialogContent {
218 background-color: rgb(255, 255, 255);
219 border: 1px solid rgb(204, 204, 204);
220 box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
221 color: rgb(44, 62, 80);
228 transform: translateX(-50%);
229 transition: visibility 0s linear .12s, opacity .12s linear;
237 transition-delay: 0s;
246 /* notification overlay */
247 #systemNotification {
250 pointer-events: none;
253 transform: translateY(-100%);
254 transition: visibility .12s linear .12s, transform .12s linear, opacity .12s linear;
261 transform: translateY(0%);
262 transition-delay: 0s;
267 border-top-left-radius: 0;
268 border-top-right-radius: 0;
274 pointer-events: auto;
280 /* highlight objects in confirmation messages */
281 .confirmationObject {