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

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