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

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