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

   1 /*!
   2  * OOjs UI v0.15.2
   3  * https://www.mediawiki.org/wiki/OOjs_UI
   4  *
   5  * Copyright 2011–2016 OOjs UI Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: 2016-02-02T22:07:06Z
  10  */
  11 @-webkit-keyframes oo-ui-progressBarWidget-slide {
  12         from {
  13                 margin-left: -40%;
  14         }
  15         to {
  16                 margin-left: 100%;
  17         }
  18 }
  19 @-moz-keyframes oo-ui-progressBarWidget-slide {
  20         from {
  21                 margin-left: -40%;
  22         }
  23         to {
  24                 margin-left: 100%;
  25         }
  26 }
  27 @keyframes oo-ui-progressBarWidget-slide {
  28         from {
  29                 margin-left: -40%;
  30         }
  31         to {
  32                 margin-left: 100%;
  33         }
  34 }
  35 .oo-ui-draggableElement {
  36         cursor: -webkit-grab -moz-grab, url(images/grab.cur), move;
  37 }
  38 .oo-ui-draggableElement-dragging {
  39         cursor: -webkit-grabbing -moz-grabbing, url(images/grabbing.cur), move;
  40         background: rgba(0, 0, 0, 0.2);
  41         opacity: 0.4;
  42 }
  43 .oo-ui-draggableGroupElement-horizontal .oo-ui-draggableElement.oo-ui-optionWidget {
  44         display: inline-block;
  45 }
  46 .oo-ui-draggableGroupElement-placeholder {
  47         position: absolute;
  48         display: block;
  49         background: rgba(0, 0, 0, 0.4);
  50 }
  51 .oo-ui-lookupElement > .oo-ui-menuSelectWidget {
  52         z-index: 1;
  53         width: 100%;
  54 }
  55 .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous > .oo-ui-panelLayout-scrollable {
  56         overflow-y: hidden;
  57 }
  58 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
  59         width: 100%;
  60         -webkit-box-sizing: border-box;
  61            -moz-box-sizing: border-box;
  62                 box-sizing: border-box;
  63 }
  64 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout-scrollable {
  65         overflow-y: auto;
  66 }
  67 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout-padded {
  68         padding: 2em;
  69 }
  70 .oo-ui-bookletLayout-outlinePanel-editable > .oo-ui-outlineSelectWidget {
  71         position: absolute;
  72         top: 0;
  73         left: 0;
  74         right: 0;
  75         bottom: 3em;
  76         overflow-y: auto;
  77 }
  78 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
  79         position: absolute;
  80         bottom: 0;
  81         left: 0;
  82         right: 0;
  83 }
  84 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
  85         padding: 1.5em;
  86 }
  87 .oo-ui-bookletLayout-outlinePanel {
  88         border-right: 1px solid #dddddd;
  89 }
  90 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
  91         box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.15);
  92 }
  93 .oo-ui-indexLayout > .oo-ui-menuLayout-menu {
  94         height: 3em;
  95 }
  96 .oo-ui-indexLayout > .oo-ui-menuLayout-content {
  97         top: 3em;
  98 }
  99 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
 100         padding: 1.5em;
 101 }
 102 .oo-ui-indexLayout > .oo-ui-menuLayout-menu {
 103         height: 2.75em;
 104 }
 105 .oo-ui-indexLayout > .oo-ui-menuLayout-content {
 106         top: 2.75em;
 107 }
 108 .oo-ui-menuLayout {
 109         position: absolute;
 110         top: 0;
 111         left: 0;
 112         right: 0;
 113         bottom: 0;
 114 }
 115 .oo-ui-menuLayout-menu,
 116 .oo-ui-menuLayout-content {
 117         position: absolute;
 118         -webkit-transition: all 200ms ease;
 119            -moz-transition: all 200ms ease;
 120                 transition: all 200ms ease;
 121 }
 122 .oo-ui-menuLayout-menu {
 123         height: 18em;
 124         width: 18em;
 125 }
 126 .oo-ui-menuLayout-content {
 127         top: 18em;
 128         left: 18em;
 129         right: 18em;
 130         bottom: 18em;
 131 }
 132 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-menu {
 133         width: 0 !important;
 134         height: 0 !important;
 135         overflow: hidden;
 136 }
 137 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-content {
 138         top: 0 !important;
 139         left: 0 !important;
 140         right: 0 !important;
 141         bottom: 0 !important;
 142 }
 143 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-menu {
 144         width: auto !important;
 145         left: 0;
 146         top: 0;
 147         right: 0;
 148 }
 149 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-content {
 150         right: 0 !important;
 151         bottom: 0 !important;
 152         left: 0 !important;
 153 }
 154 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu {
 155         height: auto !important;
 156         top: 0;
 157         right: 0;
 158         bottom: 0;
 159 }
 160 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-content {
 161         bottom: 0 !important;
 162         left: 0 !important;
 163         top: 0 !important;
 164 }
 165 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-menu {
 166         width: auto !important;
 167         right: 0;
 168         bottom: 0;
 169         left: 0;
 170 }
 171 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-content {
 172         left: 0 !important;
 173         top: 0 !important;
 174         right: 0 !important;
 175 }
 176 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu {
 177         height: auto !important;
 178         bottom: 0;
 179         left: 0;
 180         top: 0;
 181 }
 182 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
 183         top: 0 !important;
 184         right: 0 !important;
 185         bottom: 0 !important;
 186 }
 187 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
 188         display: block;
 189         position: relative;
 190 }
 191 .oo-ui-buttonSelectWidget {
 192         display: inline-block;
 193         white-space: nowrap;
 194         border-radius: 2px;
 195         margin-right: 0.5em;
 196 }
 197 .oo-ui-buttonSelectWidget:last-child {
 198         margin-right: 0;
 199 }
 200 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
 201         border-radius: 0;
 202         margin-left: -1px;
 203 }
 204 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
 205         border-bottom-left-radius: 2px;
 206         border-top-left-radius: 2px;
 207         margin-left: 0;
 208 }
 209 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
 210         border-bottom-right-radius: 2px;
 211         border-top-right-radius: 2px;
 212 }
 213 .oo-ui-buttonOptionWidget {
 214         display: inline-block;
 215         padding: 0;
 216         background-color: transparent;
 217 }
 218 .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
 219         position: relative;
 220 }
 221 .oo-ui-buttonOptionWidget.oo-ui-iconElement .oo-ui-iconElement-icon,
 222 .oo-ui-buttonOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
 223         position: static;
 224         display: inline-block;
 225         vertical-align: middle;
 226 }
 227 .oo-ui-buttonOptionWidget.oo-ui-iconElement .oo-ui-iconElement-icon {
 228         margin-top: 0;
 229 }
 230 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected,
 231 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
 232 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted {
 233         background-color: transparent;
 234 }
 235 .oo-ui-buttonOptionWidget.oo-ui-widget-disabled .oo-ui-iconElement-icon,
 236 .oo-ui-buttonOptionWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
 237         opacity: 1;
 238 }
 239 .oo-ui-toggleButtonWidget {
 240         display: inline-block;
 241         vertical-align: middle;
 242         margin-right: 0.5em;
 243 }
 244 .oo-ui-toggleButtonWidget:last-child {
 245         margin-right: 0;
 246 }
 247 .oo-ui-toggleSwitchWidget {
 248         position: relative;
 249         display: inline-block;
 250         vertical-align: middle;
 251         overflow: hidden;
 252         -webkit-box-sizing: border-box;
 253            -moz-box-sizing: border-box;
 254                 box-sizing: border-box;
 255         -webkit-transform: translateZ(0);
 256            -moz-transform: translateZ(0);
 257             -ms-transform: translateZ(0);
 258                 transform: translateZ(0);
 259         height: 2em;
 260         width: 3.5em;
 261         border: 1px solid #777777;
 262         border-radius: 1em;
 263         background-color: #ffffff;
 264         margin-right: 0.5em;
 265         -webkit-transition: background-color 100ms ease, border-color 100ms ease;
 266            -moz-transition: background-color 100ms ease, border-color 100ms ease;
 267                 transition: background-color 100ms ease, border-color 100ms ease;
 268 }
 269 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled {
 270         cursor: pointer;
 271 }
 272 .oo-ui-toggleSwitchWidget-grip {
 273         position: absolute;
 274         display: block;
 275         -webkit-box-sizing: border-box;
 276            -moz-box-sizing: border-box;
 277                 box-sizing: border-box;
 278 }
 279 .oo-ui-toggleSwitchWidget .oo-ui-toggleSwitchWidget-glow {
 280         position: absolute;
 281         top: 0;
 282         bottom: 0;
 283         right: 0;
 284         left: 0;
 285         -webkit-touch-callout: none;
 286         -webkit-user-select: none;
 287            -moz-user-select: none;
 288             -ms-user-select: none;
 289                 user-select: none;
 290 }
 291 .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow {
 292         display: none;
 293 }
 294 .oo-ui-toggleSwitchWidget:last-child {
 295         margin-right: 0;
 296 }
 297 .oo-ui-toggleSwitchWidget:before {
 298         content: "";
 299         display: block;
 300         position: absolute;
 301         top: 0;
 302         left: 0;
 303         bottom: 0;
 304         right: 0;
 305         border: 1px solid transparent;
 306         border-radius: 1em;
 307         z-index: 1;
 308 }
 309 .oo-ui-toggleSwitchWidget-grip {
 310         top: 0.35em;
 311         width: 1.2em;
 312         height: 1.2em;
 313         border-radius: 1.2em;
 314         background-color: #555555;
 315         -webkit-transition: left 100ms ease, margin-left 100ms ease;
 316            -moz-transition: left 100ms ease, margin-left 100ms ease;
 317                 transition: left 100ms ease, margin-left 100ms ease;
 318 }
 319 .oo-ui-toggleSwitchWidget-glow {
 320         display: none;
 321 }
 322 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
 323         left: 1.9em;
 324         margin-left: -2px;
 325 }
 326 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
 327         left: 0.4em;
 328         margin-left: 0;
 329 }
 330 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
 331         background-color: #347bff;
 332         border-color: #347bff;
 333 }
 334 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
 335         background-color: #ffffff;
 336         box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 337 }
 338 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
 339         border-color: #2962cc;
 340 }
 341 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover.oo-ui-toggleWidget-on {
 342         background-color: #2962cc;
 343         border-color: #2962cc;
 344 }
 345 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
 346         border-color: #347bff;
 347         outline: none;
 348 }
 349 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus.oo-ui-toggleWidget-on {
 350         border-color: #347bff;
 351 }
 352 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus.oo-ui-toggleWidget-on:before {
 353         border-color: #ffffff;
 354 }
 355 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
 356 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover {
 357         background-color: #347bff;
 358         border-color: #347bff;
 359 }
 360 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active .oo-ui-toggleSwitchWidget-grip,
 361 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover .oo-ui-toggleSwitchWidget-grip {
 362         background-color: #ffffff;
 363         box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
 364 }
 365 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
 366         background: #dddddd;
 367         border-color: #dddddd;
 368         outline: 0;
 369 }
 370 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled .oo-ui-toggleSwitchWidget-grip {
 371         background: #ffffff;
 372 }
 373 .oo-ui-progressBarWidget {
 374         max-width: 50em;
 375         background-color: #ffffff;
 376         border: 1px solid #cccccc;
 377         border-radius: 2px;
 378         overflow: hidden;
 379 }
 380 .oo-ui-progressBarWidget-bar {
 381         height: 1em;
 382         background: #dddddd;
 383         -webkit-transition: width 200ms, margin-left 200ms;
 384            -moz-transition: width 200ms, margin-left 200ms;
 385                 transition: width 200ms, margin-left 200ms;
 386 }
 387 .oo-ui-progressBarWidget-indeterminate .oo-ui-progressBarWidget-bar {
 388         -webkit-animation: oo-ui-progressBarWidget-slide 2s infinite linear;
 389            -moz-animation: oo-ui-progressBarWidget-slide 2s infinite linear;
 390                 animation: oo-ui-progressBarWidget-slide 2s infinite linear;
 391         width: 40%;
 392         margin-left: -10%;
 393         border-left-width: 1px;
 394 }
 395 .oo-ui-progressBarWidget.oo-ui-widget-disabled {
 396         opacity: 0.6;
 397 }
 398 .oo-ui-selectFileWidget {
 399         display: inline-block;
 400         vertical-align: middle;
 401         width: 100%;
 402         max-width: 50em;
 403         margin-right: 0.5em;
 404 }
 405 .oo-ui-selectFileWidget-selectButton {
 406         display: table-cell;
 407         vertical-align: middle;
 408 }
 409 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button {
 410         position: relative;
 411         overflow: hidden;
 412 }
 413 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button > input[type="file"] {
 414         position: absolute;
 415         margin: 0;
 416         top: 0;
 417         bottom: 0;
 418         left: 0;
 419         right: 0;
 420         width: 100%;
 421         height: 100%;
 422         opacity: 0;
 423         z-index: 1;
 424         cursor: pointer;
 425         padding-top: 100px;
 426 }
 427 .oo-ui-selectFileWidget-selectButton.oo-ui-widget-disabled > .oo-ui-buttonElement-button > input[type="file"] {
 428         display: none;
 429 }
 430 .oo-ui-selectFileWidget-info {
 431         width: 100%;
 432         display: table-cell;
 433         vertical-align: middle;
 434         position: relative;
 435         overflow: hidden;
 436         -webkit-box-sizing: border-box;
 437            -moz-box-sizing: border-box;
 438                 box-sizing: border-box;
 439 }
 440 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-label {
 441         position: absolute;
 442         top: 0;
 443         bottom: 0;
 444         left: 0;
 445         right: 0;
 446         text-overflow: ellipsis;
 447 }
 448 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-label > .oo-ui-selectFileWidget-fileName {
 449         float: left;
 450 }
 451 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-label > .oo-ui-selectFileWidget-fileType {
 452         float: right;
 453 }
 454 .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator,
 455 .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon,
 456 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-clearButton {
 457         position: absolute;
 458 }
 459 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-clearButton {
 460         z-index: 2;
 461 }
 462 .oo-ui-selectFileWidget-dropTarget {
 463         cursor: default;
 464 }
 465 .oo-ui-selectFileWidget-supported.oo-ui-widget-enabled .oo-ui-selectFileWidget-dropTarget {
 466         cursor: pointer;
 467 }
 468 .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-clearButton,
 469 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-clearButton {
 470         display: none;
 471 }
 472 .oo-ui-selectFileWidget:last-child {
 473         margin-right: 0;
 474 }
 475 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button {
 476         margin-left: 0.5em;
 477 }
 478 .oo-ui-selectFileWidget-info {
 479         height: 2.4em;
 480         background-color: #ffffff;
 481         border: 1px solid #cccccc;
 482         border-radius: 2px;
 483 }
 484 .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
 485         right: 0;
 486 }
 487 .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
 488         left: 0;
 489 }
 490 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-label {
 491         line-height: 2.3em;
 492         margin: 0;
 493         overflow: hidden;
 494         white-space: nowrap;
 495         -webkit-box-sizing: border-box;
 496            -moz-box-sizing: border-box;
 497                 box-sizing: border-box;
 498         text-overflow: ellipsis;
 499         left: 0.5em;
 500         right: 0.5em;
 501 }
 502 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-label > .oo-ui-selectFileWidget-fileType {
 503         color: #888888;
 504 }
 505 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-clearButton {
 506         top: 0;
 507         width: 1.875em;
 508         margin-right: 0;
 509 }
 510 .oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-clearButton .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
 511         height: 2.3em;
 512 }
 513 .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
 514         top: 0;
 515         width: 0.9375em;
 516         height: 2.3em;
 517         margin-right: 0.775em;
 518 }
 519 .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
 520         top: 0;
 521         width: 1.875em;
 522         height: 2.3em;
 523         margin-left: 0.5em;
 524 }
 525 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info {
 526         color: #cccccc;
 527         text-shadow: 0 1px 1px #ffffff;
 528         border-color: #dddddd;
 529         background-color: #f3f3f3;
 530 }
 531 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon,
 532 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
 533         opacity: 0.2;
 534 }
 535 .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-label {
 536         color: #cccccc;
 537 }
 538 .oo-ui-selectFileWidget.oo-ui-iconElement .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-label {
 539         left: 2.875em;
 540 }
 541 .oo-ui-selectFileWidget .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-label {
 542         right: 2.375em;
 543 }
 544 .oo-ui-selectFileWidget .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-clearButton {
 545         right: 0;
 546 }
 547 .oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-label {
 548         right: 4.4625em;
 549 }
 550 .oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-clearButton {
 551         right: 2.0875em;
 552 }
 553 .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-label,
 554 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-label {
 555         right: 0.5em;
 556 }
 557 .oo-ui-selectFileWidget-empty.oo-ui-indicatorElement .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-label,
 558 .oo-ui-selectFileWidget-notsupported.oo-ui-indicatorElement .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-label {
 559         right: 2em;
 560 }
 561 .oo-ui-selectFileWidget-dropTarget {
 562         line-height: 3.5em;
 563         background-color: #ffffff;
 564         border: 1px dashed #cccccc;
 565         padding: 0.5em 1em;
 566         margin-bottom: 0.5em;
 567         text-align: center;
 568         vertical-align: middle;
 569 }
 570 .oo-ui-selectFileWidget-supported.oo-ui-widget-enabled .oo-ui-selectFileWidget-dropTarget:hover {
 571         background-color: #eeeeee;
 572 }
 573 .oo-ui-selectFileWidget-supported.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop .oo-ui-selectFileWidget-dropTarget {
 574         background: rgba(52, 123, 255, 0.1);
 575 }
 576 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-dropTarget,
 577 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-dropTarget {
 578         color: #cccccc;
 579         text-shadow: 0 1px 1px #ffffff;
 580         border-color: #dddddd;
 581         background-color: #f3f3f3;
 582 }
 583 .oo-ui-outlineOptionWidget {
 584         position: relative;
 585         cursor: pointer;
 586         -webkit-touch-callout: none;
 587         -webkit-user-select: none;
 588            -moz-user-select: none;
 589             -ms-user-select: none;
 590                 user-select: none;
 591         font-size: 1.1em;
 592         padding: 0.75em;
 593 }
 594 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
 595         padding-right: 1.5em;
 596 }
 597 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
 598         opacity: 0.5;
 599 }
 600 .oo-ui-outlineOptionWidget-level-0 {
 601         padding-left: 3.5em;
 602 }
 603 .oo-ui-outlineOptionWidget-level-0 .oo-ui-iconElement-icon {
 604         left: 1em;
 605 }
 606 .oo-ui-outlineOptionWidget-level-1 {
 607         padding-left: 5em;
 608 }
 609 .oo-ui-outlineOptionWidget-level-1 .oo-ui-iconElement-icon {
 610         left: 2.5em;
 611 }
 612 .oo-ui-outlineOptionWidget-level-2 {
 613         padding-left: 6.5em;
 614 }
 615 .oo-ui-outlineOptionWidget-level-2 .oo-ui-iconElement-icon {
 616         left: 4em;
 617 }
 618 .oo-ui-selectWidget-depressed .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
 619         background-color: #d0d0d0;
 620         text-shadow: 0 1px 1px #ffffff;
 621 }
 622 .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-important {
 623         font-weight: bold;
 624 }
 625 .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-placeholder {
 626         font-style: italic;
 627 }
 628 .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-iconElement-icon {
 629         opacity: 0.5;
 630 }
 631 .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-labelElement-label {
 632         color: #777777;
 633 }
 634 .oo-ui-outlineControlsWidget {
 635         height: 3em;
 636         background-color: #ffffff;
 637 }
 638 .oo-ui-outlineControlsWidget-items,
 639 .oo-ui-outlineControlsWidget-movers {
 640         float: left;
 641         -webkit-box-sizing: border-box;
 642            -moz-box-sizing: border-box;
 643                 box-sizing: border-box;
 644 }
 645 .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon {
 646         float: left;
 647         background-position: right center;
 648 }
 649 .oo-ui-outlineControlsWidget-items {
 650         float: left;
 651 }
 652 .oo-ui-outlineControlsWidget-items .oo-ui-buttonWidget {
 653         float: left;
 654 }
 655 .oo-ui-outlineControlsWidget-movers {
 656         float: right;
 657 }
 658 .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget {
 659         float: right;
 660 }
 661 .oo-ui-outlineControlsWidget-items,
 662 .oo-ui-outlineControlsWidget-movers {
 663         height: 2em;
 664         margin: 0.5em 0.5em 0.5em 0;
 665         padding: 0;
 666 }
 667 .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon {
 668         width: 1.5em;
 669         height: 2em;
 670         margin: 0.5em 0 0.5em 0.5em;
 671         opacity: 0.2;
 672 }
 673 .oo-ui-tabSelectWidget {
 674         text-align: left;
 675         white-space: nowrap;
 676         overflow: hidden;
 677         background-color: #dddddd;
 678 }
 679 .oo-ui-tabOptionWidget {
 680         display: inline-block;
 681         vertical-align: bottom;
 682         padding: 0.35em 1em;
 683         margin: 0.5em 0 0 0.75em;
 684         border: 1px solid transparent;
 685         border-bottom: none;
 686         border-top-left-radius: 2px;
 687         border-top-right-radius: 2px;
 688         color: #555555;
 689         font-weight: bold;
 690 }
 691 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
 692         background-color: rgba(255, 255, 255, 0.3);
 693 }
 694 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
 695         background-color: rgba(255, 255, 255, 0.8);
 696 }
 697 .oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
 698         padding-right: 1.5em;
 699 }
 700 .oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
 701         opacity: 0.5;
 702 }
 703 .oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
 704 .oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
 705 .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
 706         background-color: #ffffff;
 707         color: #333333;
 708 }
 709 .oo-ui-capsuleMultiSelectWidget {
 710         display: inline-block;
 711         position: relative;
 712         width: 100%;
 713         max-width: 50em;
 714 }
 715 .oo-ui-capsuleMultiSelectWidget-handle {
 716         width: 100%;
 717         display: inline-block;
 718         position: relative;
 719 }
 720 .oo-ui-capsuleMultiSelectWidget-content {
 721         position: relative;
 722 }
 723 .oo-ui-capsuleMultiSelectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiSelectWidget-content > input {
 724         display: none;
 725 }
 726 .oo-ui-capsuleMultiSelectWidget-group {
 727         display: inline;
 728 }
 729 .oo-ui-capsuleMultiSelectWidget > .oo-ui-menuSelectWidget {
 730         z-index: 1;
 731         width: 100%;
 732 }
 733 .oo-ui-capsuleMultiSelectWidget-handle {
 734         background-color: #ffffff;
 735         cursor: text;
 736         min-height: 2.4em;
 737         margin-right: 0.5em;
 738         padding: 0.15em 0.25em;
 739         border: 1px solid #cccccc;
 740         border-radius: 2px;
 741         -webkit-box-sizing: border-box;
 742            -moz-box-sizing: border-box;
 743                 box-sizing: border-box;
 744 }
 745 .oo-ui-capsuleMultiSelectWidget-handle:last-child {
 746         margin-right: 0;
 747 }
 748 .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-indicatorElement-indicator,
 749 .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-iconElement-icon {
 750         position: absolute;
 751         background-position: center center;
 752         background-repeat: no-repeat;
 753 }
 754 .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-capsuleMultiSelectWidget-content > input {
 755         border: 0;
 756         line-height: 1.675em;
 757         margin: 0 0 0 0.2em;
 758         padding: 0;
 759         font-size: inherit;
 760         font-family: inherit;
 761         background-color: transparent;
 762         color: #000000;
 763         vertical-align: middle;
 764 }
 765 .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-capsuleMultiSelectWidget-content > input:focus {
 766         outline: none;
 767 }
 768 .oo-ui-capsuleMultiSelectWidget.oo-ui-indicatorElement .oo-ui-capsuleMultiSelectWidget-handle {
 769         padding-right: 2.4875em;
 770 }
 771 .oo-ui-capsuleMultiSelectWidget.oo-ui-indicatorElement .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-indicatorElement-indicator {
 772         right: 0;
 773         top: 0;
 774         width: 0.9375em;
 775         height: 0.9375em;
 776         margin: 0.775em;
 777 }
 778 .oo-ui-capsuleMultiSelectWidget.oo-ui-iconElement .oo-ui-capsuleMultiSelectWidget-handle {
 779         padding-left: 2.475em;
 780 }
 781 .oo-ui-capsuleMultiSelectWidget.oo-ui-iconElement .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-iconElement-icon {
 782         left: 0;
 783         top: 0;
 784         width: 1.875em;
 785         height: 1.875em;
 786         margin: 0.3em;
 787 }
 788 .oo-ui-capsuleMultiSelectWidget:hover .oo-ui-capsuleMultiSelectWidget-handle {
 789         border-color: #aaaaaa;
 790 }
 791 .oo-ui-capsuleMultiSelectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiSelectWidget-handle {
 792         color: #cccccc;
 793         text-shadow: 0 1px 1px #ffffff;
 794         border-color: #dddddd;
 795         background-color: #f3f3f3;
 796         cursor: default;
 797 }
 798 .oo-ui-capsuleMultiSelectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-iconElement-icon,
 799 .oo-ui-capsuleMultiSelectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-indicatorElement-indicator {
 800         opacity: 0.2;
 801 }
 802 .oo-ui-capsuleMultiSelectWidget .oo-ui-selectWidget {
 803         border-top-color: #ffffff;
 804 }
 805 .oo-ui-capsuleItemWidget {
 806         position: relative;
 807         display: inline-block;
 808         cursor: default;
 809         white-space: nowrap;
 810         width: auto;
 811         max-width: 100%;
 812         -webkit-box-sizing: border-box;
 813            -moz-box-sizing: border-box;
 814                 box-sizing: border-box;
 815         vertical-align: middle;
 816         padding: 0 0.4em;
 817         margin: 0.1em;
 818         height: 1.7em;
 819         line-height: 1.7em;
 820         background-color: #eeeeee;
 821         border: 1px solid #cccccc;
 822         color: #555555;
 823         border-radius: 2px;
 824 }
 825 .oo-ui-capsuleItemWidget > .oo-ui-iconElement-icon {
 826         cursor: pointer;
 827 }
 828 .oo-ui-capsuleItemWidget.oo-ui-widget-disabled > .oo-ui-iconElement-icon {
 829         cursor: default;
 830 }
 831 .oo-ui-capsuleItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
 832         display: block;
 833         text-overflow: ellipsis;
 834         overflow: hidden;
 835 }
 836 .oo-ui-capsuleItemWidget.oo-ui-indicatorElement > .oo-ui-labelElement-label {
 837         padding-right: 1.3375em;
 838 }
 839 .oo-ui-capsuleItemWidget.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator {
 840         position: absolute;
 841         right: 0.4em;
 842         top: 0;
 843         width: 0.9375em;
 844         height: 100%;
 845         background-repeat: no-repeat;
 846 }
 847 .oo-ui-capsuleItemWidget.oo-ui-indicatorElement > .oo-ui-indicator-clear {
 848         cursor: pointer;
 849 }
 850 .oo-ui-capsuleItemWidget.oo-ui-widget-disabled {
 851         color: #cccccc;
 852         text-shadow: 0 1px 1px #ffffff;
 853         border-color: #dddddd;
 854         background-color: #f3f3f3;
 855 }
 856 .oo-ui-capsuleItemWidget.oo-ui-widget-disabled > .oo-ui-indicatorElement-indicator {
 857         opacity: 0.2;
 858 }
 859 .oo-ui-searchWidget-query {
 860         position: absolute;
 861         top: 0;
 862         left: 0;
 863         right: 0;
 864 }
 865 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
 866         width: 100%;
 867 }
 868 .oo-ui-searchWidget-results {
 869         position: absolute;
 870         bottom: 0;
 871         left: 0;
 872         right: 0;
 873         overflow-x: hidden;
 874         overflow-y: auto;
 875 }
 876 .oo-ui-searchWidget-query {
 877         height: 4em;
 878         padding: 0 1em;
 879         border-bottom: 1px solid #cccccc;
 880 }
 881 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
 882         margin: 0.75em 0;
 883 }
 884 .oo-ui-searchWidget-results {
 885         top: 4em;
 886         padding: 1em;
 887         line-height: 0;
 888 }
 889 .oo-ui-numberInputWidget {
 890         display: inline-block;
 891         position: relative;
 892         max-width: 50em;
 893 }
 894 .oo-ui-numberInputWidget-field {
 895         display: table;
 896         table-layout: fixed;
 897         width: 100%;
 898 }
 899 .oo-ui-numberInputWidget-field > .oo-ui-buttonWidget,
 900 .oo-ui-numberInputWidget-field > .oo-ui-textInputWidget {
 901         display: table-cell;
 902         vertical-align: middle;
 903 }
 904 .oo-ui-numberInputWidget-field > .oo-ui-textInputWidget {
 905         width: 100%;
 906 }
 907 .oo-ui-numberInputWidget-field > .oo-ui-buttonWidget {
 908         white-space: nowrap;
 909 }
 910 .oo-ui-numberInputWidget-field > .oo-ui-buttonWidget > .oo-ui-buttonElement-button {
 911         -webkit-box-sizing: border-box;
 912            -moz-box-sizing: border-box;
 913                 box-sizing: border-box;
 914 }
 915 .oo-ui-numberInputWidget-field > .oo-ui-buttonWidget {
 916         width: 2.5em;
 917 }
 918 .oo-ui-numberInputWidget-minusButton.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
 919         border-top-right-radius: 0;
 920         border-bottom-right-radius: 0;
 921         border-right-width: 0;
 922 }
 923 .oo-ui-numberInputWidget-plusButton.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
 924         border-top-left-radius: 0;
 925         border-bottom-left-radius: 0;
 926         border-left-width: 0;
 927 }
 928 .oo-ui-numberInputWidget .oo-ui-textInputWidget input {
 929         border-radius: 0;
 930 }