resources/oojs-ui/oojs-ui.svg.css

   1 /*!
   2  * OOjs UI v0.1.0-pre (f3bc5c6)
   3  * https://www.mediawiki.org/wiki/OOjs_UI
   4  *
   5  * Copyright 2011–2014 OOjs Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: Mon Mar 03 2014 17:03:30 GMT-0800 (PST)
  10  */
  11
  12 /* Textures */
  13
  14 .oo-ui-texture-pending {
  15   background-image: /* @embed */ url(images/textures/pending.gif);
  16 }
  17
  18 .oo-ui-texture-transparency {
  19   background-image: /* @embed */ url(images/textures/transparency.png);
  20 }
  21
  22 /* RTL Definitions */
  23
  24 /* @noflip */
  25
  26 .oo-ui-rtl {
  27   direction: rtl;
  28 }
  29
  30 /* @noflip */
  31
  32 .oo-ui-ltr {
  33   direction: ltr;
  34 }
  35
  36 .oo-ui-dialog {
  37   position: fixed;
  38   top: 0;
  39   right: 0;
  40   bottom: 0;
  41   left: 0;
  42   padding: 1em;
  43   line-height: 1em;
  44   background-color: #fff;
  45   background-color: rgba(255, 255, 255, 0.5);
  46   opacity: 0;
  47   -webkit-transition: all 250ms ease-in-out;
  48      -moz-transition: all 250ms ease-in-out;
  49       -ms-transition: all 250ms ease-in-out;
  50        -o-transition: all 250ms ease-in-out;
  51           transition: all 250ms ease-in-out;
  52 }
  53
  54 .oo-ui-dialog .oo-ui-window-frame {
  55   position: fixed;
  56   top: 1em;
  57   right: 0;
  58   bottom: 1em;
  59   left: 0;
  60   width: 800px;
  61   max-height: 600px;
  62   min-height: 12em;
  63   margin: auto;
  64   overflow: hidden;
  65   background-color: #fff;
  66   border: solid 1px #ccc;
  67   border-radius: 0.5em;
  68   -webkit-transform: scale(0.5);
  69      -moz-transform: scale(0.5);
  70       -ms-transform: scale(0.5);
  71        -o-transform: scale(0.5);
  72           transform: scale(0.5);
  73   box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
  74   -webkit-transition: all 250ms ease-in-out;
  75      -moz-transition: all 250ms ease-in-out;
  76       -ms-transition: all 250ms ease-in-out;
  77        -o-transition: all 250ms ease-in-out;
  78           transition: all 250ms ease-in-out;
  79 }
  80
  81 .oo-ui-dialog .oo-ui-window-frame-small {
  82   max-width: 600px;
  83   max-height: 400px;
  84 }
  85
  86 .oo-ui-dialog .oo-ui-frame {
  87   width: 100%;
  88   height: 100%;
  89 }
  90
  91 .oo-ui-dialog-open {
  92   opacity: 1;
  93 }
  94
  95 .oo-ui-dialog-open .oo-ui-window-frame {
  96   -webkit-transform: scale(1);
  97      -moz-transform: scale(1);
  98       -ms-transform: scale(1);
  99        -o-transform: scale(1);
 100           transform: scale(1);
 101 }
 102
 103 .oo-ui-dialog-content .oo-ui-window-head,
 104 .oo-ui-dialog-content .oo-ui-window-body,
 105 .oo-ui-dialog-content .oo-ui-window-foot {
 106   position: absolute;
 107   right: 0;
 108   left: 0;
 109   overflow: hidden;
 110   -webkit-box-sizing: border-box;
 111      -moz-box-sizing: border-box;
 112           box-sizing: border-box;
 113 }
 114
 115 .oo-ui-dialog-content .oo-ui-window-head {
 116   top: 0;
 117   height: 3.8em;
 118   padding: 0.5em;
 119 }
 120
 121 .oo-ui-dialog-content .oo-ui-window-title {
 122   line-height: 2.8em;
 123 }
 124
 125 .oo-ui-dialog-content .oo-ui-window-icon {
 126   width: 2.4em;
 127   height: 2.8em;
 128   line-height: 2.8em;
 129 }
 130
 131 .oo-ui-dialog-content .oo-ui-window-closeButton {
 132   float: right;
 133   margin: 0.25em 0.25em;
 134 }
 135
 136 .oo-ui-dialog-content .oo-ui-window-body {
 137   top: 3.8em;
 138   bottom: 4.8em;
 139   box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25);
 140 }
 141
 142 .oo-ui-dialog-content .oo-ui-window-foot {
 143   bottom: 0;
 144   height: 4.8em;
 145   padding: 1em;
 146 }
 147
 148 .oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed {
 149   float: left;
 150   margin: 0.125em 0.25em;
 151 }
 152
 153 .oo-ui-dialog-content .oo-ui-window-foot .oo-ui-flaggableElement-primary,
 154 .oo-ui-dialog-content .oo-ui-window-foot .oo-ui-flaggableElement-constructive,
 155 .oo-ui-dialog-content .oo-ui-window-foot .oo-ui-flaggableElement-destructive {
 156   float: right;
 157 }
 158
 159 .oo-ui-dialog-content-footless .oo-ui-window-body {
 160   bottom: 0;
 161 }
 162
 163 .oo-ui-dialog-content-footless .oo-ui-window-foot {
 164   display: none;
 165 }
 166
 167 /* OO.ui.ButtonedElement */
 168
 169 .oo-ui-buttonedElement .oo-ui-buttonedElement-button {
 170   display: inline-block;
 171   color: #333;
 172   vertical-align: middle;
 173   cursor: pointer;
 174   -webkit-user-select: none;
 175      -moz-user-select: none;
 176       -ms-user-select: none;
 177           user-select: none;
 178   -webkit-touch-callout: none;
 179 }
 180
 181 .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon,
 182 .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator {
 183   display: none;
 184 }
 185
 186 .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 187   margin-left: 0;
 188 }
 189
 190 .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator {
 191   margin-right: -0.75em;
 192 }
 193
 194 .oo-ui-buttonedElement.oo-ui-widget-disabled .oo-ui-buttonedElement-button {
 195   cursor: default;
 196 }
 197
 198 .oo-ui-buttonedElement.oo-ui-indicatedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator,
 199 .oo-ui-buttonedElement.oo-ui-iconedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 200   display: inline-block;
 201   width: 1.9em;
 202   height: 1.9em;
 203   vertical-align: middle;
 204   background-position: center center;
 205   background-repeat: no-repeat;
 206   opacity: 0.8;
 207 }
 208
 209 .oo-ui-buttonedElement-frameless {
 210   position: relative;
 211   display: inline-block;
 212   -webkit-transition: opacity 200ms;
 213      -moz-transition: opacity 200ms;
 214       -ms-transition: opacity 200ms;
 215        -o-transition: opacity 200ms;
 216           transition: opacity 200ms;
 217 }
 218
 219 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:hover > .oo-ui-iconedElement-icon,
 220 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:focus > .oo-ui-iconedElement-icon {
 221   opacity: 1;
 222 }
 223
 224 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:hover > .oo-ui-labeledElement-label,
 225 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:focus > .oo-ui-labeledElement-label {
 226   color: #000;
 227 }
 228
 229 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 230   display: inline-block;
 231   margin-left: 0.25em;
 232   color: #333;
 233   vertical-align: middle;
 234 }
 235
 236 .oo-ui-buttonedElement-frameless.oo-ui-widget-disabled .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 237   opacity: 0.2;
 238 }
 239
 240 .oo-ui-buttonedElement-frameless.oo-ui-widget-disabled .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 241   color: #ccc;
 242 }
 243
 244 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button {
 245   display: inline-block;
 246   padding: 0.2em 0.8em;
 247   margin: 0.1em 0;
 248   font-size: 1em;
 249   text-align: center;
 250   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 251   vertical-align: top;
 252   background: #eeeeee;
 253   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
 254   background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 255   background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 256   background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 257   background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 258   background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
 259   border: 1px #c9c9c9 solid;
 260   border-radius: 0.3em;
 261   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd');
 262   -webkit-transition: border-color 100ms ease-in-out;
 263      -moz-transition: border-color 100ms ease-in-out;
 264       -ms-transition: border-color 100ms ease-in-out;
 265        -o-transition: border-color 100ms ease-in-out;
 266           transition: border-color 100ms ease-in-out;
 267 }
 268
 269 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button:hover,
 270 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button:focus {
 271   border-color: #aaa;
 272 }
 273
 274 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 275   display: inline-block;
 276   line-height: 1.9em;
 277   vertical-align: middle;
 278 }
 279
 280 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active,
 281 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed {
 282   color: black;
 283   background: #eeeeee;
 284   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #dddddd), color-stop(100%, #ffffff));
 285   background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 286   background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 287   background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 288   background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 289   background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%);
 290   border-color: #c9c9c9;
 291   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff');
 292   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
 293 }
 294
 295 .oo-ui-buttonedElement-framed.oo-ui-iconedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 296   margin-right: -0.5em;
 297   margin-left: -0.5em;
 298 }
 299
 300 .oo-ui-buttonedElement-framed.oo-ui-iconedElement.oo-ui-labeledElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 301   margin-right: 0;
 302   margin-left: -0.5em;
 303 }
 304
 305 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button {
 306   background: #cde7f4;
 307   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #eaf4fa), color-stop(100%, #b0d9ee));
 308   background-image: -webkit-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 309   background-image: -moz-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 310   background-image: -ms-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 311   background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 312   background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 313   border: solid 1px #a6cee1;
 314   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#eaf4fa', endColorstr='#b0d9ee');
 315 }
 316
 317 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button:hover,
 318 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button:focus {
 319   border-color: #9dc2d4;
 320 }
 321
 322 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active,
 323 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed {
 324   background: #cde7f4;
 325   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #b0d9ee), color-stop(100%, #eaf4fa));
 326   background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 327   background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 328   background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 329   background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 330   background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 331   border: solid 1px #a6cee1;
 332   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa');
 333 }
 334
 335 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button {
 336   background: #daf0be;
 337   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f0fbe1), color-stop(100%, #c3e59a));
 338   background-image: -webkit-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 339   background-image: -moz-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 340   background-image: -ms-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 341   background-image: -o-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 342   background-image: linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 343   border: solid 1px #b8d892;
 344   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f0fbe1', endColorstr='#c3e59a');
 345 }
 346
 347 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button:hover,
 348 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button:focus {
 349   border-color: #adcb89;
 350 }
 351
 352 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active,
 353 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed {
 354   background: #daf0be;
 355   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #c3e59a), color-stop(100%, #f0fbe1));
 356   background-image: -webkit-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 357   background-image: -moz-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 358   background-image: -ms-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 359   background-image: -o-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 360   background-image: linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 361   border: solid 1px #b8d892;
 362   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#c3e59a', endColorstr='#f0fbe1');
 363 }
 364
 365 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-destructive .oo-ui-buttonedElement-button {
 366   /* Red text */
 367
 368   color: #d45353;
 369 }
 370
 371 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button,
 372 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active,
 373 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed {
 374   color: #333;
 375   cursor: default;
 376   background: #eee;
 377   opacity: 0.5;
 378   box-shadow: none;
 379 }
 380
 381 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button:hover,
 382 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active:hover,
 383 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed:hover,
 384 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button:focus,
 385 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active:focus,
 386 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed:focus {
 387   border-color: #ccc;
 388   box-shadow: none;
 389 }
 390
 391 /* OO.ui.LabeledElement */
 392
 393 .oo-ui-labeledElement-label {
 394   display: block;
 395 }
 396
 397 /* OO.ui.ClippableElement */
 398
 399 .oo-ui-clippableElement-clippable {
 400   -webkit-box-sizing: border-box;
 401      -moz-box-sizing: border-box;
 402           box-sizing: border-box;
 403 }
 404
 405 /* OO.ui.Frame */
 406
 407 .oo-ui-frame {
 408   padding: 0;
 409   margin: 0;
 410 }
 411
 412 .oo-ui-frame-body {
 413   padding: 0;
 414   margin: 0;
 415   background: none;
 416 }
 417
 418 .oo-ui-frame-content {
 419   font-family: sans-serif;
 420   font-size: 0.8em;
 421 }
 422
 423 /* OO.ui.GridLayout */
 424
 425 .oo-ui-gridLayout {
 426   position: absolute;
 427   top: 0;
 428   right: 0;
 429   bottom: 0;
 430   left: 0;
 431 }
 432
 433 /* OO.ui.PanelLayout */
 434
 435 .oo-ui-panelLayout {
 436   position: absolute;
 437   top: 0;
 438   right: 0;
 439   bottom: 0;
 440   left: 0;
 441 }
 442
 443 .oo-ui-panelLayout-scrollable {
 444   overflow-y: auto;
 445 }
 446
 447 .oo-ui-panelLayout-padded {
 448   padding: 2em;
 449 }
 450
 451 /* OO.ui.FieldsetLayout */
 452
 453 .oo-ui-fieldsetLayout {
 454   position: relative;
 455   padding: 0;
 456   margin: 0;
 457   border: none;
 458 }
 459
 460 .oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout {
 461   margin-top: 2em;
 462 }
 463
 464 .oo-ui-fieldsetLayout-labeled {
 465   margin-top: -0.75em;
 466 }
 467
 468 .oo-ui-fieldsetLayout > legend.oo-ui-labeledElement-label {
 469   padding: 0.25em 0;
 470   margin-bottom: 0.5em;
 471   font-size: 1.5em;
 472 }
 473
 474 .oo-ui-fieldsetLayout.oo-ui-iconedElement > legend.oo-ui-labeledElement-label {
 475   padding-left: 1.75em;
 476 }
 477
 478 .oo-ui-fieldsetLayout.oo-ui-iconedElement > .oo-ui-iconedElement-icon {
 479   position: absolute;
 480   top: 0;
 481   left: 0;
 482   display: block;
 483   width: 2em;
 484   height: 2em;
 485   background-position: center center;
 486   background-repeat: no-repeat;
 487 }
 488
 489 /* OO.ui.FieldLayout */
 490
 491 .oo-ui-fieldLayout {
 492   margin-bottom: 1em;
 493 }
 494
 495 .oo-ui-fieldLayout:last-child {
 496   margin-bottom: 0;
 497 }
 498
 499 .oo-ui-fieldLayout:before,
 500 .oo-ui-fieldLayout:after {
 501   display: table;
 502   content: " ";
 503 }
 504
 505 .oo-ui-fieldLayout:after {
 506   clear: both;
 507 }
 508
 509 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labeledElement-label,
 510 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label {
 511   display: block;
 512   float: left;
 513   width: 35%;
 514   padding-top: 0.5em;
 515   margin-right: 5%;
 516 }
 517
 518 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field,
 519 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field {
 520   display: block;
 521   float: left;
 522   width: 60%;
 523 }
 524
 525 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label {
 526   text-align: right;
 527 }
 528
 529 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labeledElement-label {
 530   display: inline-block;
 531   padding: 0.75em 0.5em 0.5em 0.5em;
 532   vertical-align: middle;
 533 }
 534
 535 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field {
 536   display: inline-block;
 537   padding: 0.5em 0;
 538   vertical-align: middle;
 539 }
 540
 541 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labeledElement-label {
 542   padding: 0.5em 0;
 543 }
 544
 545 /* OO.ui.BookletLayout */
 546
 547 .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous .oo-ui-panelLayout-scrollable {
 548   overflow-y: hidden;
 549 }
 550
 551 .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout {
 552   width: 100%;
 553   padding: 1.5em;
 554   -webkit-box-sizing: border-box;
 555      -moz-box-sizing: border-box;
 556           box-sizing: border-box;
 557 }
 558
 559 .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-scrollable {
 560   overflow-y: auto;
 561 }
 562
 563 .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-padded {
 564   padding: 2em;
 565 }
 566
 567 .oo-ui-bookletLayout-outlinePanel {
 568   border-right: solid 1px #ddd;
 569 }
 570
 571 .oo-ui-bookletLayout-outlinePanel-editable .oo-ui-outlineWidget {
 572   position: absolute;
 573   top: 0;
 574   right: 0;
 575   bottom: 3em;
 576   left: 0;
 577   overflow-y: auto;
 578 }
 579
 580 .oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget {
 581   position: absolute;
 582   right: 0;
 583   bottom: 0;
 584   left: 0;
 585   box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
 586 }
 587
 588 .oo-ui-stackLayout > .oo-ui-panelLayout {
 589   display: none;
 590 }
 591
 592 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
 593   position: relative;
 594   display: block;
 595 }
 596
 597 /* OO.ui.PopupTool */
 598
 599 .oo-ui-popupTool .oo-ui-popupWidget {
 600   margin-left: 1.25em;
 601   font-size: 0.8em;
 602 }
 603
 604 .oo-ui-popupTool .oo-ui-popupWidget-popup,
 605 .oo-ui-popupTool .oo-ui-popupWidget-tail {
 606   z-index: 4;
 607 }
 608
 609 /* OO.ui.Toolbar */
 610
 611 .oo-ui-toolbar {
 612   clear: both;
 613 }
 614
 615 .oo-ui-toolbar-bar {
 616   line-height: 1em;
 617   background: #f8fbfd;
 618   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #f1f7fb));
 619   background-image: -webkit-linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
 620   background-image: -moz-linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
 621   background-image: -ms-linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
 622   background-image: -o-linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
 623   background-image: linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
 624   border-bottom: solid 1px #ccc;
 625   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#f1f7fb');
 626 }
 627
 628 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
 629   background: none;
 630   border: none;
 631 }
 632
 633 .oo-ui-toolbar-bottom .oo-ui-toolbar-bar {
 634   position: absolute;
 635 }
 636
 637 .oo-ui-toolbar-actions {
 638   float: right;
 639 }
 640
 641 .oo-ui-toolbar-tools {
 642   float: left;
 643 }
 644
 645 .oo-ui-toolbar-tools,
 646 .oo-ui-toolbar-actions,
 647 .oo-ui-toolbar-shadow {
 648   -webkit-user-select: none;
 649      -moz-user-select: none;
 650       -ms-user-select: none;
 651           user-select: none;
 652   -webkit-touch-callout: none;
 653 }
 654
 655 .oo-ui-toolbar-actions .oo-ui-popupWidget {
 656   -webkit-user-select: all;
 657      -moz-user-select: all;
 658       -ms-user-select: all;
 659           user-select: all;
 660   -webkit-touch-callout: default;
 661 }
 662
 663 .oo-ui-toolbar-shadow {
 664   position: absolute;
 665   bottom: -9px;
 666   width: 100%;
 667   height: 9px;
 668   pointer-events: none;
 669   background-image: /* @embed */ url(images/toolbar-shadow.png);
 670   background-position: left top;
 671   background-repeat: repeat-x;
 672   opacity: 0.125;
 673   -webkit-transition: opacity 500ms ease-in-out;
 674      -moz-transition: opacity 500ms ease-in-out;
 675       -ms-transition: opacity 500ms ease-in-out;
 676        -o-transition: opacity 500ms ease-in-out;
 677           transition: opacity 500ms ease-in-out;
 678 }
 679
 680 /* OO.ui.ToolGroup */
 681
 682 .oo-ui-toolGroup {
 683   display: inline-block;
 684   margin: 0.3em;
 685   vertical-align: middle;
 686   border: solid 1px transparent;
 687   border-radius: 0.25em;
 688   -webkit-transition: border-color 300ms ease-in-out;
 689      -moz-transition: border-color 300ms ease-in-out;
 690       -ms-transition: border-color 300ms ease-in-out;
 691        -o-transition: border-color 300ms ease-in-out;
 692           transition: border-color 300ms ease-in-out;
 693 }
 694
 695 .oo-ui-toolGroup:hover {
 696   border-color: rgba(0, 0, 0, 0.1);
 697 }
 698
 699 .oo-ui-toolGroup-empty {
 700   display: none;
 701 }
 702
 703 .oo-ui-toolGroup .oo-ui-tool-link .oo-ui-tool-title {
 704   color: #000;
 705 }
 706
 707 .oo-ui-toolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 708   background-position: center center;
 709   background-repeat: no-repeat;
 710 }
 711
 712 /* OO.ui.BarToolGroup */
 713
 714 .oo-ui-barToolGroup > .oo-ui-iconedElement-icon,
 715 .oo-ui-barToolGroup > .oo-ui-labeledElement-label {
 716   display: none;
 717 }
 718
 719 .oo-ui-barToolGroup .oo-ui-tool {
 720   position: relative;
 721   display: inline-block;
 722   margin: -1px 0 -1px -1px;
 723   vertical-align: top;
 724   border: solid 1px transparent;
 725 }
 726
 727 .oo-ui-barToolGroup .oo-ui-tool:first-child {
 728   border-bottom-left-radius: 0.25em;
 729   border-top-left-radius: 0.25em;
 730 }
 731
 732 .oo-ui-barToolGroup .oo-ui-tool:last-child {
 733   margin-right: -1px;
 734   border-top-right-radius: 0.25em;
 735   border-bottom-right-radius: 0.25em;
 736 }
 737
 738 .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 739   border-color: rgba(0, 0, 0, 0.2);
 740 }
 741
 742 .oo-ui-barToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
 743   border-color: rgba(0, 0, 0, 0.2);
 744 }
 745
 746 .oo-ui-barToolGroup .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
 747   border-left-color: rgba(0, 0, 0, 0.1);
 748 }
 749
 750 .oo-ui-barToolGroup .oo-ui-tool-link {
 751   display: block;
 752   height: 1.5em;
 753   padding: 0.25em;
 754   cursor: pointer;
 755 }
 756
 757 .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 758   display: block;
 759   width: 1.5em;
 760   height: 1.5em;
 761   opacity: 0.8;
 762 }
 763
 764 .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-tool-title {
 765   display: none;
 766 }
 767
 768 .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link {
 769   cursor: default;
 770 }
 771
 772 .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 773   opacity: 0.2;
 774 }
 775
 776 .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 777   opacity: 0.8;
 778 }
 779
 780 .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon {
 781   opacity: 1;
 782 }
 783
 784 .oo-ui-barToolGroup .oo-ui-tool-title,
 785 .oo-ui-barToolGroup .oo-ui-tool-accel {
 786   display: none;
 787 }
 788
 789 /* OO.ui.PopupToolGroup */
 790
 791 .oo-ui-popupToolGroup {
 792   position: relative;
 793   height: 2em;
 794   min-width: 2.5em;
 795 }
 796
 797 .oo-ui-popupToolGroup.oo-ui-indicatedElement.oo-ui-iconedElement {
 798   min-width: 3.5em;
 799 }
 800
 801 .oo-ui-popupToolGroup-handle {
 802   display: block;
 803   cursor: pointer;
 804 }
 805
 806 .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator,
 807 .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon {
 808   position: absolute;
 809   top: 0;
 810   width: 2em;
 811   height: 2em;
 812   background-position: center center;
 813   background-repeat: no-repeat;
 814   opacity: 0.8;
 815 }
 816
 817 .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator {
 818   right: 0;
 819 }
 820
 821 .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon {
 822   left: 0.25em;
 823 }
 824
 825 .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label {
 826   margin: 0 1em;
 827   font-size: 0.8em;
 828   line-height: 2.6em;
 829 }
 830
 831 .oo-ui-popupToolGroup.oo-ui-iconedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label {
 832   margin-left: 3.25em;
 833 }
 834
 835 .oo-ui-popupToolGroup.oo-ui-indicatedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label {
 836   margin-right: 2.25em;
 837 }
 838
 839 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 840   position: absolute;
 841   top: 2em;
 842   left: -1px;
 843   z-index: 4;
 844   display: none;
 845   background-color: white;
 846   border: solid 1px #ccc;
 847   box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25);
 848 }
 849
 850 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools .oo-ui-iconedElement-icon {
 851   background-position: center center;
 852   background-repeat: no-repeat;
 853 }
 854
 855 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled {
 856   border-bottom-right-radius: 0;
 857   border-bottom-left-radius: 0;
 858 }
 859
 860 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
 861   display: block;
 862 }
 863
 864 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 865   display: inline-block;
 866   width: 2em;
 867   height: 2em;
 868   margin-right: 0.5em;
 869   vertical-align: middle;
 870 }
 871
 872 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
 873   display: inline-block;
 874   font-size: 0.8em;
 875   line-height: 2em;
 876   vertical-align: middle;
 877 }
 878
 879 .oo-ui-popupToolGroup .oo-ui-tool-accel {
 880   display: none;
 881 }
 882
 883 /* OO.ui.ListToolGroup */
 884
 885 .oo-ui-listToolGroup.oo-ui-popupToolGroup-active {
 886   border-color: rgba(0, 0, 0, 0.2);
 887 }
 888
 889 .oo-ui-listToolGroup .oo-ui-toolGroup-tools {
 890   padding: 0.25em;
 891 }
 892
 893 .oo-ui-listToolGroup .oo-ui-tool {
 894   display: inline-block;
 895   width: 100%;
 896   margin: -1px 0;
 897   border: solid 1px transparent;
 898   -webkit-box-sizing: border-box;
 899      -moz-box-sizing: border-box;
 900           box-sizing: border-box;
 901 }
 902
 903 .oo-ui-listToolGroup .oo-ui-tool-link {
 904   display: block;
 905   padding-right: 0.5em;
 906   white-space: nowrap;
 907   cursor: pointer;
 908 }
 909
 910 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
 911   border-color: rgba(0, 0, 0, 0.1);
 912 }
 913
 914 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
 915   border-top-color: rgba(0, 0, 0, 0.1);
 916 }
 917
 918 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
 919   border-color: rgba(0, 0, 0, 0.2);
 920 }
 921
 922 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 923   border-color: rgba(0, 0, 0, 0.2);
 924 }
 925
 926 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 927   opacity: 0.8;
 928 }
 929
 930 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon {
 931   opacity: 1;
 932 }
 933
 934 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link {
 935   cursor: default;
 936 }
 937
 938 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
 939   color: #ccc;
 940 }
 941
 942 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 943   opacity: 0.2;
 944 }
 945
 946 /* OO.ui.MenuToolGroup */
 947
 948 .oo-ui-menuToolGroup {
 949   border-color: rgba(0, 0, 0, 0.1);
 950 }
 951
 952 .oo-ui-menuToolGroup:hover {
 953   border-color: rgba(0, 0, 0, 0.2);
 954 }
 955
 956 .oo-ui-menuToolGroup.oo-ui-popupToolGroup-active {
 957   border-color: rgba(0, 0, 0, 0.25);
 958 }
 959
 960 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
 961   min-width: 8em;
 962 }
 963
 964 .oo-ui-menuToolGroup .oo-ui-tool {
 965   display: block;
 966 }
 967
 968 .oo-ui-menuToolGroup .oo-ui-tool-link {
 969   display: block;
 970   padding: 0.25em 1em 0.25em 0.25em;
 971   white-space: nowrap;
 972   cursor: pointer;
 973 }
 974
 975 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 976   background-image: none;
 977 }
 978
 979 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconedElement-icon {
 980   background-image: /* @embed */ url(images/icons/check.png);
 981 }
 982
 983 .oo-ui-menuToolGroup .oo-ui-tool:hover {
 984   background-color: #e1f3ff;
 985 }
 986
 987 /* Common */
 988
 989 .oo-ui-barToolGroup .oo-ui-tool-active.oo-ui-widget-enabled,
 990 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled,
 991 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled {
 992   background: #f8fbfd;
 993   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff));
 994   background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 995   background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 996   background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 997   background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 998   background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 999   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff');
1000   box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
1001 }
1002
1003 /* OO.ui.ButtonWidget */
1004
1005 .oo-ui-buttonWidget {
1006   display: inline-block;
1007   vertical-align: middle;
1008 }
1009
1010 /* OO.ui.PopupButtonWidget */
1011
1012 .oo-ui-popupButtonWidget {
1013   position: relative;
1014 }
1015
1016 .oo-ui-popupButtonWidget .oo-ui-popupWidget {
1017   position: absolute;
1018   left: 1em;
1019   cursor: auto;
1020 }
1021
1022 /* OO.ui.ButtonGroupWidget */
1023
1024 .oo-ui-buttonGroupWidget {
1025   display: inline-block;
1026   white-space: nowrap;
1027   border-radius: 0.3em;
1028 }
1029
1030 .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button {
1031   margin-bottom: -1px;
1032   margin-left: -1px;
1033   border-radius: 0;
1034 }
1035
1036 .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:first-child .oo-ui-buttonedElement-button {
1037   margin-left: 0;
1038   border-bottom-left-radius: 0.3em;
1039   border-top-left-radius: 0.3em;
1040 }
1041
1042 .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:last-child .oo-ui-buttonedElement-button {
1043   border-top-right-radius: 0.3em;
1044   border-bottom-right-radius: 0.3em;
1045 }
1046
1047 /* OO.ui.SelectWidget */
1048
1049 .oo-ui-selectWidget {
1050   padding: 0;
1051   margin: 0;
1052   list-style: none;
1053 }
1054
1055 /* OO.ui.OptionWidget */
1056
1057 .oo-ui-optionWidget {
1058   position: relative;
1059   display: block;
1060   padding: 0.5em 2em 0.5em 3em;
1061   margin: 0;
1062   list-style: none;
1063   cursor: pointer;
1064   border: none;
1065 }
1066
1067 .oo-ui-optionWidget-highlighted {
1068   background-color: #e1f3ff;
1069 }
1070
1071 .oo-ui-optionWidget-selected {
1072   background-color: #a7dcff;
1073 }
1074
1075 .oo-ui-optionWidget.oo-ui-widget-disabled {
1076   cursor: default;
1077 }
1078
1079 .oo-ui-optionWidget .oo-ui-labeledElement-label {
1080   overflow: hidden;
1081   line-height: 1.5em;
1082   text-overflow: ellipsis;
1083   white-space: nowrap;
1084 }
1085
1086 .oo-ui-optionWidget .oo-ui-iconedElement-icon,
1087 .oo-ui-optionWidget .oo-ui-indicatedElement-indicator {
1088   position: absolute;
1089   top: 50%;
1090   width: 2em;
1091   height: 2em;
1092   margin-top: -1em;
1093   background-position: center center;
1094   background-repeat: no-repeat;
1095 }
1096
1097 .oo-ui-optionWidget .oo-ui-iconedElement-icon {
1098   left: 0.5em;
1099 }
1100
1101 .oo-ui-optionWidget .oo-ui-indicatedElement-indicator {
1102   right: 0.5em;
1103 }
1104
1105 /* OO.ui.OutlineItemWidget */
1106
1107 .oo-ui-outlineItemWidget {
1108   position: relative;
1109   padding: 0.75em;
1110   font-size: 1.1em;
1111   cursor: pointer;
1112   -webkit-user-select: none;
1113      -moz-user-select: none;
1114       -ms-user-select: none;
1115           user-select: none;
1116   -webkit-touch-callout: none;
1117 }
1118
1119 .oo-ui-outlineItemWidget.oo-ui-optionWidget-selected {
1120   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
1121   background-color: #a7dcff;
1122 }
1123
1124 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-important {
1125   font-weight: bold;
1126 }
1127
1128 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder {
1129   font-style: italic;
1130 }
1131
1132 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-iconedElement-icon,
1133 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-indicatedElement-indicator {
1134   opacity: 0.5;
1135 }
1136
1137 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label {
1138   color: #777;
1139 }
1140
1141 .oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label {
1142   padding-right: 1.5em;
1143 }
1144
1145 .oo-ui-outlineItemWidget-level-0 {
1146   padding-left: 3.5em;
1147 }
1148
1149 .oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon {
1150   left: 1em;
1151 }
1152
1153 .oo-ui-outlineItemWidget-level-1 {
1154   padding-left: 5em;
1155 }
1156
1157 .oo-ui-outlineItemWidget-level-1 .oo-ui-iconedElement-icon {
1158   left: 2.5em;
1159 }
1160
1161 .oo-ui-outlineItemWidget-level-2 {
1162   padding-left: 6.5em;
1163 }
1164
1165 .oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon {
1166   left: 4em;
1167 }
1168
1169 /* OO.ui.OutlineControlsWidget */
1170
1171 .oo-ui-outlineControlsWidget {
1172   height: 3em;
1173   background-color: #fff;
1174 }
1175
1176 .oo-ui-outlineControlsWidget-adders,
1177 .oo-ui-outlineControlsWidget-movers {
1178   float: left;
1179   height: 2em;
1180   padding: 0;
1181   margin: 0.5em;
1182   -webkit-box-sizing: border-box;
1183      -moz-box-sizing: border-box;
1184           box-sizing: border-box;
1185 }
1186
1187 .oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon {
1188   float: left;
1189   width: 1.5em;
1190   height: 2em;
1191   margin: 0.5em 0 0.5em 0.5em;
1192   background-position: right center;
1193   background-repeat: no-repeat;
1194   opacity: 0.2;
1195 }
1196
1197 .oo-ui-outlineControlsWidget-adders {
1198   float: left;
1199   margin-left: 0;
1200 }
1201
1202 .oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget {
1203   float: left;
1204 }
1205
1206 .oo-ui-outlineControlsWidget-movers {
1207   float: right;
1208 }
1209
1210 .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget {
1211   float: right;
1212 }
1213
1214 /* OO.ui.LabelWidget */
1215
1216 .oo-ui-labelWidget {
1217   padding: 0.5em 0;
1218 }
1219
1220 /* OO.ui.TextInputWidget */
1221
1222 .oo-ui-textInputWidget {
1223   position: relative;
1224   width: 20em;
1225   -webkit-box-sizing: border-box;
1226      -moz-box-sizing: border-box;
1227           box-sizing: border-box;
1228 }
1229
1230 .oo-ui-textInputWidget input,
1231 .oo-ui-textInputWidget textarea {
1232   display: inline-block;
1233   width: 100%;
1234   padding: 0.5em;
1235   font-family: sans-serif;
1236   font-size: 1em;
1237   background-color: #fff;
1238   border: solid 1px #ccc;
1239   border-radius: 0.25em;
1240   box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
1241   -webkit-box-sizing: border-box;
1242      -moz-box-sizing: border-box;
1243           box-sizing: border-box;
1244   -webkit-transition: border-color 200ms, box-shadow 200ms;
1245      -moz-transition: border-color 200ms, box-shadow 200ms;
1246       -ms-transition: border-color 200ms, box-shadow 200ms;
1247        -o-transition: border-color 200ms, box-shadow 200ms;
1248           transition: border-color 200ms, box-shadow 200ms;
1249   resize: none;
1250 }
1251
1252 .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
1253 .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus {
1254   border-color: #a7dcff;
1255   outline: none;
1256   box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
1257 }
1258
1259 .oo-ui-textInputWidget input[readonly],
1260 .oo-ui-textInputWidget textarea[readonly] {
1261   color: #777;
1262   text-shadow: 0 1px 1px #fff;
1263 }
1264
1265 .oo-ui-textInputWidget-pending input,
1266 .oo-ui-textInputWidget-pending textarea {
1267   background-color: transparent;
1268 }
1269
1270 .oo-ui-textInputWidget-decorated input,
1271 .oo-ui-textInputWidget-decorated textarea {
1272   padding-left: 2em;
1273 }
1274
1275 .oo-ui-textInputWidget-icon {
1276   position: absolute;
1277   top: 0;
1278   left: 0;
1279   width: 2em;
1280   height: 100%;
1281   background-position: right center;
1282   background-repeat: no-repeat;
1283 }
1284
1285 .oo-ui-textInputWidget.oo-ui-widget-disabled input,
1286 .oo-ui-textInputWidget.oo-ui-widget-disabled input:focus,
1287 .oo-ui-textInputWidget.oo-ui-widget-disabled textarea,
1288 .oo-ui-textInputWidget.oo-ui-widget-disabled textarea:focus {
1289   color: #ccc;
1290   text-shadow: 0 1px 1px #fff;
1291   background-color: #f3f3f3;
1292   border-color: #ddd;
1293 }
1294
1295 /* OO.ui.MenuWidget */
1296
1297 .oo-ui-menuWidget {
1298   position: absolute;
1299   margin-top: -1px;
1300   background: #fff;
1301   border: solid 1px #ccc;
1302   border-radius: 0 0 0.25em 0.25em;
1303   box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
1304 }
1305
1306 .oo-ui-menuWidget input {
1307   position: absolute;
1308   width: 0;
1309   height: 0;
1310   overflow: hidden;
1311   opacity: 0;
1312 }
1313
1314 /* OO.ui.InlineMenuWidget */
1315
1316 .oo-ui-inlineMenuWidget {
1317   position: relative;
1318   display: inline-block;
1319   min-width: 20em;
1320   margin: 0.25em 0;
1321 }
1322
1323 .oo-ui-inlineMenuWidget-handle {
1324   display: inline-block;
1325   width: 100%;
1326   height: 2.5em;
1327   cursor: pointer;
1328   border: solid 1px rgba(0, 0, 0, 0.1);
1329   border-radius: 0.25em;
1330   -webkit-box-sizing: border-box;
1331      -moz-box-sizing: border-box;
1332           box-sizing: border-box;
1333   -webkit-user-select: none;
1334      -moz-user-select: none;
1335       -ms-user-select: none;
1336           user-select: none;
1337   -webkit-touch-callout: none;
1338 }
1339
1340 .oo-ui-inlineMenuWidget-handle:hover {
1341   border-color: rgba(0, 0, 0, 0.2);
1342 }
1343
1344 .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator,
1345 .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon {
1346   position: absolute;
1347   top: 0;
1348   width: 2.5em;
1349   height: 2.5em;
1350   background-position: center center;
1351   background-repeat: no-repeat;
1352   opacity: 0.8;
1353 }
1354
1355 .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator {
1356   right: 0;
1357 }
1358
1359 .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon {
1360   left: 0.25em;
1361 }
1362
1363 .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label {
1364   margin: 0 0.5em;
1365   line-height: 2.5em;
1366 }
1367
1368 .oo-ui-inlineMenuWidget.oo-ui-iconedElement .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label {
1369   margin-left: 3em;
1370 }
1371
1372 .oo-ui-inlineMenuWidget.oo-ui-indicatedElement .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label {
1373   margin-right: 2em;
1374 }
1375
1376 .oo-ui-inlineMenuWidget .oo-ui-menuWidget {
1377   width: 100%;
1378 }
1379
1380 /* OO.ui.MenuItemWidget */
1381
1382 .oo-ui-menuItemWidget {
1383   position: relative;
1384 }
1385
1386 .oo-ui-menuItemWidget .oo-ui-iconedElement-icon {
1387   display: none;
1388 }
1389
1390 .oo-ui-menuItemWidget.oo-ui-optionWidget-selected {
1391   background-color: transparent;
1392 }
1393
1394 .oo-ui-menuItemWidget.oo-ui-optionWidget-selected .oo-ui-iconedElement-icon {
1395   display: block;
1396 }
1397
1398 .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted {
1399   background-color: #e1f3ff;
1400 }
1401
1402 /* OO.ui.MenuSectionItemWidget */
1403
1404 .oo-ui-menuSectionItemWidget {
1405   padding: 0.33em 0.75em;
1406   color: #888;
1407   cursor: default;
1408 }
1409
1410 /* OO.ui.ButtonSelectWidget */
1411
1412 .oo-ui-buttonSelectWidget {
1413   display: inline-block;
1414   white-space: nowrap;
1415   border-radius: 0.3em;
1416 }
1417
1418 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button {
1419   margin-left: -1px;
1420   border-radius: 0;
1421 }
1422
1423 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button {
1424   margin-left: 0;
1425   border-bottom-left-radius: 0.3em;
1426   border-top-left-radius: 0.3em;
1427 }
1428
1429 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonedElement-button {
1430   border-top-right-radius: 0.3em;
1431   border-bottom-right-radius: 0.3em;
1432 }
1433
1434 /* OO.ui.ButtonOptionWidget */
1435
1436 .oo-ui-buttonOptionWidget {
1437   display: inline-block;
1438   padding: 0;
1439   background-color: transparent;
1440 }
1441
1442 .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button {
1443   position: relative;
1444   height: 1.9em;
1445 }
1446
1447 .oo-ui-buttonOptionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon,
1448 .oo-ui-buttonOptionWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator {
1449   position: static;
1450   display: inline-block;
1451   height: 1.9em;
1452   margin-top: 0;
1453   vertical-align: middle;
1454 }
1455
1456 /* OO.ui.PopupWidget */
1457
1458 .oo-ui-popupWidget-popup {
1459   position: absolute;
1460   overflow: hidden;
1461   background-color: #fff;
1462   border: solid 1px #ccc;
1463   border-radius: 0.25em;
1464   box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
1465 }
1466
1467 .oo-ui-popupWidget-tail {
1468   display: none;
1469 }
1470
1471 .oo-ui-popupWidget-tailed .oo-ui-popupWidget-popup {
1472   margin-top: 7px;
1473 }
1474
1475 .oo-ui-popupWidget-tailed .oo-ui-popupWidget-tail {
1476   position: absolute;
1477   display: block;
1478   width: 15px;
1479   height: 8px;
1480   margin-left: -7px;
1481   background-image: /* @embed */ url(images/tail.svg);
1482   background-repeat: no-repeat;
1483 }
1484
1485 .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup {
1486   -webkit-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
1487      -moz-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
1488       -ms-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
1489        -o-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
1490           transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
1491 }
1492
1493 .oo-ui-popupWidget-head {
1494   height: 2.5em;
1495   -webkit-user-select: none;
1496      -moz-user-select: none;
1497       -ms-user-select: none;
1498           user-select: none;
1499   -webkit-touch-callout: none;
1500 }
1501
1502 .oo-ui-popupWidget-head .oo-ui-buttonWidget {
1503   float: right;
1504   margin: 0.25em;
1505 }
1506
1507 .oo-ui-popupWidget-head .oo-ui-labeledElement-label {
1508   float: left;
1509   margin: 0.75em 1em;
1510   cursor: default;
1511 }
1512
1513 .oo-ui-popupWidget-body {
1514   box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25);
1515 }
1516
1517 /* OO.ui.SearchWidget */
1518
1519 .oo-ui-searchWidget-query {
1520   position: absolute;
1521   top: 0;
1522   right: 0;
1523   left: 0;
1524   height: 4em;
1525   padding: 0 1em;
1526   box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
1527 }
1528
1529 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
1530   width: 100%;
1531   margin: 0.75em 0;
1532 }
1533
1534 .oo-ui-searchWidget-results {
1535   position: absolute;
1536   top: 4em;
1537   right: 0;
1538   bottom: 0;
1539   left: 0;
1540   padding: 1em;
1541   overflow-x: hidden;
1542   overflow-y: auto;
1543   line-height: 0;
1544 }
1545
1546 /* OO.ui.ToggleSwitchWidget */
1547
1548 .oo-ui-toggleSwitchWidget {
1549   position: relative;
1550   display: inline-block;
1551   width: 3em;
1552   height: 2em;
1553   overflow: hidden;
1554   vertical-align: middle;
1555   cursor: pointer;
1556   background: #eeeeee;
1557   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #dddddd), color-stop(100%, #ffffff));
1558   background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1559   background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1560   background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1561   background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1562   background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%);
1563   border: solid 1px #ccc;
1564   border-radius: 1em;
1565   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff');
1566   -webkit-transform: translateZ(0);
1567      -moz-transform: translateZ(0);
1568       -ms-transform: translateZ(0);
1569        -o-transform: translateZ(0);
1570           transform: translateZ(0);
1571   box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
1572   -webkit-box-sizing: border-box;
1573      -moz-box-sizing: border-box;
1574           box-sizing: border-box;
1575 }
1576
1577 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
1578   cursor: default;
1579   opacity: 0.5;
1580 }
1581
1582 .oo-ui-toggleSwitchWidget-grip {
1583   position: absolute;
1584   top: 0.25em;
1585   left: 0.25em;
1586   display: block;
1587   width: 1.5em;
1588   height: 1.5em;
1589   background: #eeeeee;
1590   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
1591   background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1592   background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1593   background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1594   background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1595   background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
1596   border: 1px #c9c9c9 solid;
1597   border-radius: 1em;
1598   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd');
1599   box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
1600   -webkit-box-sizing: border-box;
1601      -moz-box-sizing: border-box;
1602           box-sizing: border-box;
1603   -webkit-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1604      -moz-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1605       -ms-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1606        -o-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1607           transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1608 }
1609
1610 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover,
1611 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
1612   border-color: #aaa;
1613 }
1614
1615 .oo-ui-toggleSwitchWidget .oo-ui-toggleSwitchWidget-glow {
1616   position: absolute;
1617   top: 0;
1618   right: 0;
1619   bottom: 0;
1620   left: 0;
1621   background: #cde7f4;
1622   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #b0d9ee), color-stop(100%, #eaf4fa));
1623   background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1624   background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1625   background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1626   background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1627   background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1628   border-radius: 1em;
1629   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa');
1630   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
1631   -webkit-transition: opacity 200ms ease-in-out;
1632      -moz-transition: opacity 200ms ease-in-out;
1633       -ms-transition: opacity 200ms ease-in-out;
1634        -o-transition: opacity 200ms ease-in-out;
1635           transition: opacity 200ms ease-in-out;
1636   -webkit-user-select: none;
1637      -moz-user-select: none;
1638       -ms-user-select: none;
1639           user-select: none;
1640   -webkit-touch-callout: none;
1641 }
1642
1643 .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
1644   left: 1.25em;
1645   margin-left: -2px;
1646 }
1647
1648 .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-glow {
1649   opacity: 1;
1650 }
1651
1652 .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
1653   left: 0.25em;
1654   margin-left: 0;
1655 }
1656
1657 .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow {
1658   opacity: 0;
1659 }
1660
1661 /* OO.ui.Window */
1662
1663 .oo-ui-window-head {
1664   -webkit-user-select: none;
1665      -moz-user-select: none;
1666       -ms-user-select: none;
1667           user-select: none;
1668   -webkit-touch-callout: none;
1669 }
1670
1671 .oo-ui-window-body {
1672   padding: 0 0.75em;
1673 }
1674
1675 .oo-ui-window-icon {
1676   float: left;
1677   width: 2em;
1678   height: 2em;
1679   margin-right: 0.5em;
1680   line-height: 2em;
1681   background-position: right center;
1682   background-repeat: no-repeat;
1683 }
1684
1685 .oo-ui-window-title {
1686   float: left;
1687   line-height: 2em;
1688   color: #333;
1689   white-space: nowrap;
1690   cursor: default;
1691 }
1692
1693 .oo-ui-window-overlay {
1694   position: absolute;
1695   top: 0;
1696   left: 0;
1697   font-family: sans-serif;
1698   font-size: 1em;
1699   line-height: 1.5em;
1700 }
1701
1702 /* Icons */
1703
1704 .oo-ui-icon-add-item {
1705   background-image: /* @embed */ url(images/icons/add-item.svg);
1706 }
1707
1708 .oo-ui-icon-advanced {
1709   background-image: /* @embed */ url(images/icons/advanced.svg);
1710 }
1711
1712 .oo-ui-icon-alert {
1713   background-image: /* @embed */ url(images/icons/alert.svg);
1714 }
1715
1716 .oo-ui-icon-check {
1717   background-image: /* @embed */ url(images/icons/check.svg);
1718 }
1719
1720 .oo-ui-icon-clear {
1721   background-image: /* @embed */ url(images/icons/clear.svg);
1722 }
1723
1724 .oo-ui-icon-close {
1725   background-image: /* @embed */ url(images/icons/close.svg);
1726 }
1727
1728 .oo-ui-icon-code {
1729   background-image: /* @embed */ url(images/icons/code.svg);
1730 }
1731
1732 .oo-ui-icon-collapse {
1733   background-image: /* @embed */ url(images/icons/collapse.svg);
1734 }
1735
1736 .oo-ui-icon-comment {
1737   background-image: /* @embed */ url(images/icons/comment.svg);
1738 }
1739
1740 .oo-ui-icon-expand {
1741   background-image: /* @embed */ url(images/icons/expand.svg);
1742 }
1743
1744 .oo-ui-icon-help {
1745   background-image: /* @embed */ url(images/icons/help.svg);
1746 }
1747
1748 .oo-ui-icon-link {
1749   background-image: /* @embed */ url(images/icons/link.svg);
1750 }
1751
1752 .oo-ui-icon-menu {
1753   background-image: /* @embed */ url(images/icons/menu.svg);
1754 }
1755
1756 .oo-ui-icon-next {
1757   background-image: /* @embed */ url(images/icons/move-ltr.svg);
1758 }
1759
1760 .oo-ui-icon-picture {
1761   background-image: /* @embed */ url(images/icons/picture.svg);
1762 }
1763
1764 .oo-ui-icon-previous {
1765   background-image: /* @embed */ url(images/icons/move-rtl.svg);
1766 }
1767
1768 .oo-ui-icon-redo {
1769   background-image: /* @embed */ url(images/icons/arched-arrow-ltr.svg);
1770 }
1771
1772 .oo-ui-icon-remove {
1773   background-image: /* @embed */ url(images/icons/remove.svg);
1774 }
1775
1776 .oo-ui-icon-search {
1777   background-image: /* @embed */ url(images/icons/search.svg);
1778 }
1779
1780 .oo-ui-icon-settings {
1781   background-image: /* @embed */ url(images/icons/settings.svg);
1782 }
1783
1784 .oo-ui-icon-tag {
1785   background-image: /* @embed */ url(images/icons/tag.svg);
1786 }
1787
1788 .oo-ui-icon-undo {
1789   background-image: /* @embed */ url(images/icons/arched-arrow-rtl.svg);
1790 }
1791
1792 .oo-ui-icon-window {
1793   background-image: /* @embed */ url(images/icons/window.svg);
1794 }
1795
1796 /* Indicators */
1797
1798 .oo-ui-indicator-down {
1799   background-image: /* @embed */ url(images/indicators/down.svg);
1800 }
1801
1802 .oo-ui-indicator-required {
1803   background-image: /* @embed */ url(images/indicators/required.svg);
1804 }
1805
1806 .oo-ui-indicator-up {
1807   background-image: /* @embed */ url(images/indicators/up.svg);
1808 }