wcfsetup/install/files/style/ui/dialog.scss

   1 .dialogOverlay {
   2         background-color: transparent;
   3         bottom: 0;
   4         left: 0;
   5         opacity: 0;
   6         position: fixed;
   7         right: 0;
   8         top: 0;
   9         transition: opacity .12s linear, visibility 0s linear .3s;
  10         visibility: hidden;
  11         will-change: opacity;
  12         z-index: 399;
  13
  14         @include screen-sm-up {
  15                 padding: 100px 0;
  16         }
  17
  18         &[aria-hidden=false] {
  19                 opacity: 1;
  20                 transition-delay: 0s;
  21                 visibility: visible;
  22         }
  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         }
  35 }
  36
  37 @keyframes wcfDialog {
  38         0%   { visibility: visible; top: 8%; }
  39         100% { visibility: visible; top: 10%; }
  40 }
  41
  42 @keyframes wcfDialogOut {
  43         0% { visibility: visible; top: 10%; }
  44         100% { visibility: hidden; top: 12%; }
  45 }
  46
  47 .dialogContainer {
  48         z-index: 200;
  49
  50         @include screen-xs {
  51                 left: 0 !important;
  52                 position: fixed;
  53                 right: 0 !important;
  54                 top: 0 !important;
  55         }
  56
  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);
  61                 left: 50%;
  62                 max-height: 80%;
  63                 max-width: 80%;
  64                 min-width: 500px;
  65                 position: absolute;
  66                 transform: translateX(-50%);
  67
  68                 &[aria-hidden=false] {
  69                         animation: wcfDialog .3s;
  70                         animation-fill-mode: forwards;
  71                 }
  72         }
  73
  74         &[aria-hidden=true] {
  75                 /* Child elements with `visibility: visible` will not be visually rendered, but pointer events are recognized. */
  76                 pointer-events: none;
  77                 visibility: hidden;
  78         }
  79
  80         &[aria-hidden=false] ~ .dialogContainer[aria-hidden=false] {
  81                 z-index: 50;
  82         }
  83
  84         > header {
  85                 background-color: $wcfHeaderBackground;
  86                 color: $wcfHeaderText;
  87                 display: flex;
  88
  89                 @include screen-sm-down {
  90                         padding: 10px;
  91                 }
  92
  93                 @include screen-md-up {
  94                         padding: 10px 20px;
  95                 }
  96
  97                 > span {
  98                         flex: 1 auto;
  99
 100                         @include wcfFontHeadline;
 101                 }
 102
 103                 > .dialogCloseButton {
 104                         align-self: center;
 105                         flex: 0 0 auto;
 106
 107                         &:hover > .icon {
 108                                 color: $wcfHeaderLinkActive;
 109                         }
 110
 111                         > .icon {
 112                                 color: $wcfHeaderLink;
 113                         }
 114                 }
 115         }
 116
 117         > .dialogContent {
 118                 background-color: $wcfContentBackground;
 119                 overflow: auto;
 120
 121                 // do not use `-webkit-overflow-scrolling` as it will cut off content in iOS Safari
 122
 123                 &:not(.dialogContentNoPadding) {
 124                         @include screen-sm-down {
 125                                 padding: 10px;
 126                         }
 127
 128                         @include screen-md-up {
 129                                 padding: 30px 20px 10px 20px;
 130                         }
 131
 132                         &::after {
 133                                 content: "";
 134                                 display: block;
 135                                 height: 20px;
 136                         }
 137
 138                         &.dialogForm::after {
 139                                 height: 17px;
 140                         }
 141                 }
 142
 143                 &:not(.dialogForm) {
 144                         border-bottom-left-radius: 3px;
 145                         border-bottom-right-radius: 3px;
 146                 }
 147
 148                 dl:not(.plain) {
 149                         > dt {
 150                                 float: none;
 151                                 text-align: left;
 152                                 width: auto !important;
 153
 154                                 &:empty {
 155                                         margin-bottom: 0;
 156                                 }
 157                         }
 158
 159                         > dd {
 160                                 margin-left: 0 !important;
 161                         }
 162                 }
 163
 164                 .dialogFormSubmit {
 165                         background-color: $wcfSidebarBackground;
 166                         border-top: 1px solid $wcfContentBorderInner;
 167                         bottom: 0;
 168                         left: 0;
 169                         padding: 10px;
 170                         position: absolute;
 171                         right: 0;
 172
 173                         @include screen-sm-up {
 174                                 /* this reverts the negative margin introduced by `.formSubmit` */
 175                                 margin-bottom: 0;
 176                                 padding-bottom: 0;
 177                         }
 178                 }
 179
 180                 .section {
 181                         margin-top: 30px;
 182
 183                         .sectionTitle {
 184                                 @include wcfFontHeadline;
 185                         }
 186                 }
 187
 188                 > div {
 189                         > .section:first-child,
 190                         > fieldset:first-child {
 191                                 margin-top: 0;
 192                         }
 193
 194                         > div,
 195                         > section,
 196                         > form {
 197                                 > .section:first-child,
 198                                 > fieldset:first-child {
 199                                         margin-top: 0;
 200                                 }
 201                         }
 202                 }
 203
 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;
 208                 }
 209         }
 210 }
 211
 212 /* static dialogs */
 213 .jsStaticDialogContent {
 214         display: none;
 215 }
 216
 217 .spinner {
 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);
 222         left: 50%;
 223         opacity: 0;
 224         padding: 10px;
 225         position: fixed;
 226         text-align: center;
 227         top: 200px;
 228         transform: translateX(-50%);
 229         transition: visibility 0s linear .12s, opacity .12s linear;
 230         visibility: hidden;
 231         z-index: 401;
 232
 233         &.active {
 234                 opacity: 1;
 235                 visibility: visible;
 236
 237                 transition-delay: 0s;
 238         }
 239
 240         > span:not(.icon) {
 241                 display: block;
 242                 margin-top: 5px;
 243         }
 244 }
 245
 246 /* notification overlay */
 247 #systemNotification {
 248         left: 0;
 249         opacity: 0;
 250         pointer-events: none;
 251         position: fixed;
 252         top: 0;
 253         transform: translateY(-100%);
 254         transition: visibility .12s linear .12s, transform .12s linear, opacity .12s linear;
 255         visibility: hidden;
 256         width: 100%;
 257         z-index: 460;
 258
 259         &.active {
 260                 opacity: 1;
 261                 transform: translateY(0%);
 262                 transition-delay: 0s;
 263                 visibility: visible;
 264         }
 265
 266         > p {
 267                 border-top-left-radius: 0;
 268                 border-top-right-radius: 0;
 269                 border-top-width: 0;
 270                 cursor: pointer;
 271                 display: table;
 272                 margin: 0 auto;
 273                 max-width: 80%;
 274                 pointer-events: auto;
 275
 276                 //.userSelectNone;
 277         }
 278 }
 279
 280 /* highlight objects in confirmation messages */
 281 .confirmationObject {
 282         font-weight: 600;
 283 }