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                 visibility: hidden;
  76         }
  77
  78         &[aria-hidden=false] ~ .dialogContainer[aria-hidden=false] {
  79                 z-index: 50;
  80         }
  81
  82         > header {
  83                 background-color: $wcfHeaderBackground;
  84                 color: $wcfHeaderText;
  85                 display: flex;
  86
  87                 @include screen-sm-down {
  88                         padding: 10px;
  89                 }
  90
  91                 @include screen-md-up {
  92                         padding: 10px 20px;
  93                 }
  94
  95                 > span {
  96                         flex: 1 auto;
  97
  98                         @include wcfFontHeadline;
  99                 }
 100
 101                 > .dialogCloseButton {
 102                         align-self: center;
 103                         flex: 0 0 auto;
 104
 105                         &:hover > .icon {
 106                                 color: $wcfHeaderLinkActive;
 107                         }
 108
 109                         > .icon {
 110                                 color: $wcfHeaderLink;
 111                         }
 112                 }
 113         }
 114
 115         > .dialogContent {
 116                 background-color: $wcfContentBackground;
 117                 overflow: auto;
 118
 119                 // do not use `-webkit-overflow-scrolling` as it will cut off content in iOS Safari
 120
 121                 &:not(.dialogContentNoPadding) {
 122                         @include screen-sm-down {
 123                                 padding: 10px;
 124                         }
 125
 126                         @include screen-md-up {
 127                                 padding: 30px 20px 10px 20px;
 128                         }
 129
 130                         &::after {
 131                                 content: "";
 132                                 display: block;
 133                                 height: 20px;
 134                         }
 135
 136                         &.dialogForm::after {
 137                                 height: 17px;
 138                         }
 139                 }
 140
 141                 &:not(.dialogForm) {
 142                         border-bottom-left-radius: 3px;
 143                         border-bottom-right-radius: 3px;
 144                 }
 145
 146                 dl:not(.plain) {
 147                         > dt {
 148                                 float: none;
 149                                 text-align: left;
 150                                 width: auto !important;
 151
 152                                 &:empty {
 153                                         margin-bottom: 0;
 154                                 }
 155                         }
 156
 157                         > dd {
 158                                 margin-left: 0 !important;
 159                         }
 160                 }
 161
 162                 .dialogFormSubmit {
 163                         background-color: $wcfSidebarBackground;
 164                         border-top: 1px solid $wcfContentBorderInner;
 165                         bottom: 0;
 166                         left: 0;
 167                         padding: 10px;
 168                         position: absolute;
 169                         right: 0;
 170
 171                         @include screen-sm-up {
 172                                 /* this reverts the negative margin introduced by `.formSubmit` */
 173                                 margin-bottom: 0;
 174                                 padding-bottom: 0;
 175                         }
 176                 }
 177
 178                 .section {
 179                         margin-top: 30px;
 180
 181                         .sectionTitle {
 182                                 @include wcfFontHeadline;
 183                         }
 184                 }
 185
 186                 > div {
 187                         > .section:first-child,
 188                         > fieldset:first-child {
 189                                 margin-top: 0;
 190                         }
 191
 192                         > div,
 193                         > form {
 194                                 > .section:first-child,
 195                                 > fieldset:first-child {
 196                                         margin-top: 0;
 197                                 }
 198                         }
 199                 }
 200
 201                 /* Chrome and Safari use heavy anti-aliasing when the dialog's width
 202                    cannot be evenly divided, causing the whole text to become blurry */
 203                 &.jsWebKitFractionalPixel {
 204                         border-left: 1px solid transparent;
 205                 }
 206         }
 207 }
 208
 209 /* static dialogs */
 210 .jsStaticDialogContent {
 211         display: none;
 212 }
 213
 214 .spinner {
 215         background-color: rgb(255, 255, 255);
 216         border: 1px solid rgb(204, 204, 204);
 217         box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
 218         color: rgb(44, 62, 80);
 219         left: 50%;
 220         opacity: 0;
 221         padding: 10px;
 222         position: fixed;
 223         text-align: center;
 224         top: 200px;
 225         transform: translateX(-50%);
 226         transition: visibility 0s linear .12s, opacity .12s linear;
 227         visibility: hidden;
 228         z-index: 401;
 229
 230         &.active {
 231                 opacity: 1;
 232                 visibility: visible;
 233
 234                 transition-delay: 0s;
 235         }
 236
 237         > span:not(.icon) {
 238                 display: block;
 239                 margin-top: 5px;
 240         }
 241 }
 242
 243 /* notification overlay */
 244 #systemNotification {
 245         left: 0;
 246         opacity: 0;
 247         pointer-events: none;
 248         position: fixed;
 249         top: 0;
 250         transform: translateY(-100%);
 251         transition: visibility .12s linear .12s, transform .12s linear, opacity .12s linear;
 252         visibility: hidden;
 253         width: 100%;
 254         z-index: 460;
 255
 256         &.active {
 257                 opacity: 1;
 258                 transform: translateY(0%);
 259                 transition-delay: 0s;
 260                 visibility: visible;
 261         }
 262
 263         > p {
 264                 border-top-left-radius: 0;
 265                 border-top-right-radius: 0;
 266                 border-top-width: 0;
 267                 cursor: pointer;
 268                 display: table;
 269                 margin: 0 auto;
 270                 max-width: 80%;
 271                 pointer-events: auto;
 272
 273                 //.userSelectNone;
 274         }
 275 }
 276
 277 /* highlight objects in confirmation messages */
 278 .confirmationObject {
 279         font-weight: 600;
 280 }