resources/lib/oojs-ui/oojs-ui-windows-mediawiki.css

   1 /*!
   2  * OOjs UI v0.19.4
   3  * https://www.mediawiki.org/wiki/OOjs_UI
   4  *
   5  * Copyright 2011–2017 OOjs UI Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: 2017-02-28T23:19:44Z
  10  */
  11 /* stylelint-disable selector-no-vendor-prefix, at-rule-no-unknown */
  12 /* stylelint-enable selector-no-vendor-prefix, at-rule-no-unknown */
  13 .oo-ui-window {
  14   background: transparent;
  15 }
  16 .oo-ui-window-frame {
  17   -webkit-box-sizing: border-box;
  18      -moz-box-sizing: border-box;
  19           box-sizing: border-box;
  20 }
  21 .oo-ui-window-content {
  22   position: absolute;
  23   top: 0;
  24   left: 0;
  25   right: 0;
  26   bottom: 0;
  27 }
  28 .oo-ui-window-content:focus {
  29   outline: 0;
  30 }
  31 .oo-ui-window-head,
  32 .oo-ui-window-foot {
  33   -webkit-touch-callout: none;
  34   -webkit-user-select: none;
  35      -moz-user-select: none;
  36       -ms-user-select: none;
  37           user-select: none;
  38 }
  39 .oo-ui-window-body {
  40   margin: 0;
  41   padding: 0;
  42   background: none;
  43 }
  44 .oo-ui-window-overlay {
  45   position: absolute;
  46   top: 0;
  47   /* @noflip */
  48   left: 0;
  49 }
  50 .oo-ui-dialog-content > .oo-ui-window-head,
  51 .oo-ui-dialog-content > .oo-ui-window-body,
  52 .oo-ui-dialog-content > .oo-ui-window-foot {
  53   position: absolute;
  54   left: 0;
  55   right: 0;
  56   -webkit-box-sizing: border-box;
  57      -moz-box-sizing: border-box;
  58           box-sizing: border-box;
  59 }
  60 .oo-ui-dialog-content > .oo-ui-window-head {
  61   overflow: hidden;
  62   z-index: 1;
  63   top: 0;
  64 }
  65 .oo-ui-dialog-content > .oo-ui-window-body {
  66   overflow: auto;
  67   z-index: 2;
  68   top: 0;
  69   bottom: 0;
  70 }
  71 .oo-ui-dialog-content > .oo-ui-window-foot {
  72   z-index: 3;
  73   bottom: 0;
  74 }
  75 .oo-ui-messageDialog-actions .oo-ui-actionWidget {
  76   position: relative;
  77   text-align: center;
  78 }
  79 .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonElement-button {
  80   display: block;
  81 }
  82 .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labelElement-label {
  83   position: relative;
  84   top: auto;
  85   bottom: auto;
  86 }
  87 .oo-ui-messageDialog-actions-horizontal {
  88   display: table;
  89   table-layout: fixed;
  90   width: 100%;
  91 }
  92 .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
  93   display: table-cell;
  94   width: 1%;
  95 }
  96 .oo-ui-messageDialog-actions-vertical {
  97   display: block;
  98 }
  99 .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget {
 100   display: block;
 101   overflow: hidden;
 102   text-overflow: ellipsis;
 103 }
 104 .oo-ui-messageDialog-content > .oo-ui-window-foot {
 105   outline: 1px solid #a2a9b1;
 106 }
 107 .oo-ui-messageDialog-title,
 108 .oo-ui-messageDialog-message {
 109   display: block;
 110   text-align: center;
 111 }
 112 .oo-ui-messageDialog-title.oo-ui-labelElement,
 113 .oo-ui-messageDialog-message.oo-ui-labelElement {
 114   padding-top: 0.5em;
 115 }
 116 .oo-ui-messageDialog-title {
 117   font-size: 1.5em;
 118   line-height: 1;
 119   color: #000;
 120 }
 121 .oo-ui-messageDialog-message {
 122   font-size: 0.9em;
 123   line-height: 1.25;
 124   color: #222;
 125 }
 126 .oo-ui-messageDialog-message-verbose {
 127   font-size: 1.1em;
 128   line-height: 1.4;
 129   text-align: left;
 130 }
 131 .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
 132   border-right: 1px solid #a2a9b1;
 133   margin: 0;
 134 }
 135 .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child {
 136   border-right-width: 0;
 137 }
 138 .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget {
 139   border-bottom: 1px solid #a2a9b1;
 140   margin: 0;
 141 }
 142 .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget:last-child {
 143   border-bottom-width: 0;
 144 }
 145 .oo-ui-messageDialog-actions .oo-ui-actionWidget {
 146   min-height: 3.4em;
 147   margin-right: 0;
 148 }
 149 .oo-ui-messageDialog-actions .oo-ui-actionWidget:last-child {
 150   margin-right: 0;
 151 }
 152 .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonElement-button {
 153   border-radius: 0;
 154 }
 155 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-labelElement .oo-ui-labelElement-label {
 156   line-height: 3.4;
 157   text-align: center;
 158 }
 159 .oo-ui-messageDialog-actions .oo-ui-actionWidget:hover {
 160   background-color: rgba(0, 0, 0, 0.05);
 161 }
 162 .oo-ui-messageDialog-actions .oo-ui-actionWidget:active {
 163   background-color: rgba(0, 0, 0, 0.1);
 164 }
 165 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:hover,
 166 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:hover {
 167   background-color: rgba(8, 126, 204, 0.05);
 168 }
 169 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive:active,
 170 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-constructive:active {
 171   background-color: rgba(8, 126, 204, 0.1);
 172 }
 173 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label,
 174 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-constructive .oo-ui-labelElement-label {
 175   font-weight: bold;
 176 }
 177 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-destructive:hover {
 178   background-color: rgba(212, 83, 83, 0.05);
 179 }
 180 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggedElement-destructive:active {
 181   background-color: rgba(212, 83, 83, 0.1);
 182 }
 183 .oo-ui-processDialog-location {
 184   overflow: hidden;
 185   text-overflow: ellipsis;
 186   white-space: nowrap;
 187 }
 188 .oo-ui-processDialog-title {
 189   display: inline;
 190   padding: 0;
 191 }
 192 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget,
 193 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget,
 194 .oo-ui-processDialog-actions-other .oo-ui-actionWidget {
 195   white-space: nowrap;
 196 }
 197 .oo-ui-processDialog-actions-safe,
 198 .oo-ui-processDialog-actions-primary {
 199   position: absolute;
 200   top: 0;
 201   bottom: 0;
 202 }
 203 .oo-ui-processDialog-actions-safe {
 204   left: 0;
 205 }
 206 .oo-ui-processDialog-actions-primary {
 207   right: 0;
 208 }
 209 .oo-ui-processDialog-errors {
 210   position: absolute;
 211   top: 0;
 212   left: 0;
 213   right: 0;
 214   bottom: 0;
 215   z-index: 2;
 216   overflow-x: hidden;
 217   overflow-y: auto;
 218 }
 219 .oo-ui-processDialog-content .oo-ui-window-head {
 220   height: 3.4em;
 221 }
 222 .oo-ui-processDialog-content .oo-ui-window-body {
 223   top: 3.4em;
 224   outline: 1px solid rgba(0, 0, 0, 0.2);
 225 }
 226 .oo-ui-processDialog-navigation {
 227   position: relative;
 228   height: 3.4em;
 229   padding: 0 1em;
 230 }
 231 .oo-ui-processDialog-location {
 232   padding: 0.75em 0;
 233   height: 1.875em;
 234   cursor: default;
 235   text-align: center;
 236 }
 237 .oo-ui-processDialog-title {
 238   font-weight: bold;
 239   line-height: 1.875em;
 240 }
 241 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-framed,
 242 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-framed,
 243 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-framed {
 244   margin: 0.5em;
 245 }
 246 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless,
 247 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless,
 248 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless {
 249   margin: 0;
 250 }
 251 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button,
 252 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button,
 253 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
 254   padding: 0.75em 1em;
 255   vertical-align: middle;
 256 }
 257 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless .oo-ui-labelElement-label,
 258 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless .oo-ui-labelElement-label,
 259 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless .oo-ui-labelElement-label {
 260   line-height: 1.875em;
 261 }
 262 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless:hover,
 263 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless:hover {
 264   background-color: rgba(0, 0, 0, 0.05);
 265 }
 266 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless:active,
 267 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless:active {
 268   background-color: rgba(0, 0, 0, 0.1);
 269 }
 270 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive:hover,
 271 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive:hover,
 272 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive:hover,
 273 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive:hover {
 274   background-color: rgba(8, 126, 204, 0.05);
 275 }
 276 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive:active,
 277 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive:active,
 278 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive:active,
 279 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive:active {
 280   background-color: rgba(8, 126, 204, 0.1);
 281 }
 282 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label,
 283 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-progressive .oo-ui-labelElement-label,
 284 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive .oo-ui-labelElement-label,
 285 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive .oo-ui-labelElement-label {
 286   font-weight: bold;
 287 }
 288 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive:hover,
 289 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive:hover {
 290   background-color: rgba(212, 83, 83, 0.05);
 291 }
 292 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive:active,
 293 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive:active {
 294   background-color: rgba(212, 83, 83, 0.1);
 295 }
 296 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement {
 297   margin-right: 0;
 298 }
 299 .oo-ui-processDialog > .oo-ui-window-frame {
 300   min-height: 5em;
 301 }
 302 .oo-ui-processDialog-errors {
 303   background-color: rgba(255, 255, 255, 0.9);
 304   padding: 3em 3em 1.5em 3em;
 305   text-align: center;
 306 }
 307 .oo-ui-processDialog-errors .oo-ui-buttonWidget {
 308   margin: 2em 1em 2em 1em;
 309 }
 310 .oo-ui-processDialog-errors-title {
 311   font-size: 1.5em;
 312   color: #000;
 313   margin-bottom: 2em;
 314 }
 315 .oo-ui-processDialog-error {
 316   text-align: left;
 317   margin: 1em;
 318   padding: 1em;
 319   border: 1px solid #d33;
 320   background-color: #fff7f7;
 321   border-radius: 2px;
 322 }
 323 .oo-ui-windowManager-modal > .oo-ui-dialog {
 324   position: fixed;
 325   width: 0;
 326   height: 0;
 327   overflow: hidden;
 328   z-index: 4;
 329 }
 330 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
 331   width: auto;
 332   height: auto;
 333   top: 0;
 334   right: 0;
 335   bottom: 0;
 336   left: 0;
 337   padding: 1em;
 338 }
 339 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup > .oo-ui-window-frame {
 340   position: absolute;
 341   right: 0;
 342   left: 0;
 343   margin: auto;
 344   overflow: hidden;
 345   max-width: 100%;
 346   max-height: 100%;
 347 }
 348 .oo-ui-windowManager-fullscreen > .oo-ui-dialog > .oo-ui-window-frame {
 349   width: 100%;
 350   height: 100%;
 351   top: 0;
 352   bottom: 0;
 353 }
 354 .oo-ui-windowManager-modal > .oo-ui-dialog {
 355   background-color: rgba(255, 255, 255, 0.5);
 356   opacity: 0;
 357   -webkit-transition: opacity 250ms;
 358      -moz-transition: opacity 250ms;
 359           transition: opacity 250ms;
 360 }
 361 .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
 362   background-color: #fff;
 363   opacity: 0;
 364   -webkit-transform: scale(0.5);
 365      -moz-transform: scale(0.5);
 366       -ms-transform: scale(0.5);
 367           transform: scale(0.5);
 368   -webkit-transition: all 250ms;
 369      -moz-transition: all 250ms;
 370           transition: all 250ms;
 371 }
 372 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup {
 373   opacity: 1;
 374 }
 375 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame {
 376   opacity: 1;
 377   -webkit-transform: scale(1);
 378      -moz-transform: scale(1);
 379       -ms-transform: scale(1);
 380           transform: scale(1);
 381 }
 382 .oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
 383   top: 1em;
 384   bottom: 1em;
 385   max-height: 100%;
 386   max-height: calc(100% - 2em);
 387   border: 1px solid #a2a9b1;
 388   border-radius: 2px;
 389   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
 390 }