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

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