resources/lib/oojs-ui/oojs-ui-apex.css

   1 /*!
   2  * OOjs UI v0.1.0-pre (97dbb50137)
   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: 2014-07-16T22:59:48Z
  10  */
  11 .oo-ui-dialog-content > .oo-ui-window-head,
  12 .oo-ui-dialog-content > .oo-ui-window-body,
  13 .oo-ui-dialog-content > .oo-ui-window-foot {
  14   position: absolute;
  15   right: 0;
  16   left: 0;
  17   overflow: hidden;
  18   -webkit-box-sizing: border-box;
  19      -moz-box-sizing: border-box;
  20           box-sizing: border-box;
  21 }
  22
  23 .oo-ui-dialog-content > .oo-ui-window-head {
  24   top: 0;
  25   z-index: 1;
  26 }
  27
  28 .oo-ui-dialog-content > .oo-ui-window-body {
  29   top: 0;
  30   bottom: 0;
  31   z-index: 2;
  32   box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25);
  33 }
  34
  35 .oo-ui-dialog-content > .oo-ui-window-foot {
  36   bottom: 0;
  37   z-index: 1;
  38 }
  39
  40 .oo-ui-dialog-content > .oo-ui-window-overlay {
  41   z-index: 3;
  42 }
  43
  44 .oo-ui-frame-content {
  45   font-family: sans-serif;
  46   font-size: 0.8em;
  47 }
  48
  49 .oo-ui-toolbar-bar {
  50   background: #f8fbfd;
  51   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #f1f7fb));
  52   background-image: -webkit-linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
  53   background-image: -moz-linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
  54   background-image: -ms-linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
  55   background-image: -o-linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
  56   background-image: linear-gradient(top, #ffffff 0%, #f1f7fb 100%);
  57   border-bottom: solid 1px #ccc;
  58   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#f1f7fb');
  59 }
  60
  61 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
  62   background: none;
  63   border: none;
  64 }
  65
  66 .oo-ui-toolbar-shadow {
  67   bottom: -9px;
  68   height: 9px;
  69   background-image: /* @embed */ url(images/toolbar-shadow.png);
  70   opacity: 0.125;
  71   -webkit-transition: opacity 500ms ease-in-out;
  72      -moz-transition: opacity 500ms ease-in-out;
  73       -ms-transition: opacity 500ms ease-in-out;
  74        -o-transition: opacity 500ms ease-in-out;
  75           transition: opacity 500ms ease-in-out;
  76 }
  77
  78 .oo-ui-toolGroup {
  79   border: solid 1px transparent;
  80   border-radius: 0.25em;
  81   -webkit-transition: border-color 300ms ease-in-out;
  82      -moz-transition: border-color 300ms ease-in-out;
  83       -ms-transition: border-color 300ms ease-in-out;
  84        -o-transition: border-color 300ms ease-in-out;
  85           transition: border-color 300ms ease-in-out;
  86 }
  87
  88 .oo-ui-toolGroup.oo-ui-widget-enabled:hover {
  89   border-color: rgba(0, 0, 0, 0.1);
  90 }
  91
  92 .oo-ui-toolGroup.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
  93   color: #000;
  94 }
  95
  96 .oo-ui-window-content {
  97   background: transparent;
  98 }
  99
 100 .oo-ui-window-overlay {
 101   font-family: sans-serif;
 102   font-size: 1em;
 103   line-height: 1.5em;
 104 }
 105
 106 .oo-ui-windowManager-modal > .oo-ui-dialog {
 107   background-color: rgba(255, 255, 255, 0.5);
 108   opacity: 0;
 109   -webkit-transition: opacity 250ms ease-in-out;
 110      -moz-transition: opacity 250ms ease-in-out;
 111       -ms-transition: opacity 250ms ease-in-out;
 112        -o-transition: opacity 250ms ease-in-out;
 113           transition: opacity 250ms ease-in-out;
 114 }
 115
 116 .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
 117   top: 1em;
 118   bottom: 1em;
 119   background-color: #fff;
 120   -webkit-transform: scale(0.5);
 121      -moz-transform: scale(0.5);
 122       -ms-transform: scale(0.5);
 123        -o-transform: scale(0.5);
 124           transform: scale(0.5);
 125   -webkit-transition: all 250ms ease-in-out;
 126      -moz-transition: all 250ms ease-in-out;
 127       -ms-transition: all 250ms ease-in-out;
 128        -o-transition: all 250ms ease-in-out;
 129           transition: all 250ms ease-in-out;
 130 }
 131
 132 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready {
 133   opacity: 1;
 134 }
 135
 136 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame {
 137   -webkit-transform: scale(1);
 138      -moz-transform: scale(1);
 139       -ms-transform: scale(1);
 140        -o-transform: scale(1);
 141           transform: scale(1);
 142 }
 143
 144 .oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
 145   border: solid 1px #ccc;
 146   border-radius: 0.5em;
 147   box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
 148 }
 149
 150 .oo-ui-messageDialog-content .oo-ui-window-body {
 151   box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.33);
 152 }
 153
 154 .oo-ui-messageDialog-title,
 155 .oo-ui-messageDialog-message {
 156   display: block;
 157   padding-top: 0.5em;
 158   text-align: center;
 159 }
 160
 161 .oo-ui-messageDialog-title {
 162   font-size: 1.5em;
 163   line-height: 1em;
 164   color: #000;
 165 }
 166
 167 .oo-ui-messageDialog-message {
 168   font-size: 0.9em;
 169   line-height: 1.25em;
 170   color: #666;
 171 }
 172
 173 .oo-ui-messageDialog-message-verbose {
 174   font-size: 1.1em;
 175   line-height: 1.5em;
 176   text-align: left;
 177 }
 178
 179 .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
 180   border-right: solid 1px #e5e5e5;
 181 }
 182
 183 .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child {
 184   border-right-width: 0;
 185 }
 186
 187 .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget {
 188   border-bottom: solid 1px #e5e5e5;
 189 }
 190
 191 .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget:last-child {
 192   border-bottom-width: 0;
 193 }
 194
 195 .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labeledElement-label {
 196   padding: 0 2em;
 197   line-height: 3.4em;
 198   text-align: center;
 199 }
 200
 201 .oo-ui-messageDialog-actions .oo-ui-actionWidget:hover {
 202   background-color: rgba(0, 0, 0, 0.05);
 203 }
 204
 205 .oo-ui-messageDialog-actions .oo-ui-actionWidget:active {
 206   background-color: rgba(0, 0, 0, 0.1);
 207 }
 208
 209 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover {
 210   background-color: rgba(8, 126, 204, 0.05);
 211 }
 212
 213 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active {
 214   background-color: rgba(8, 126, 204, 0.1);
 215 }
 216
 217 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label {
 218   font-weight: bold;
 219 }
 220
 221 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover {
 222   background-color: rgba(118, 171, 54, 0.05);
 223 }
 224
 225 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active {
 226   background-color: rgba(118, 171, 54, 0.1);
 227 }
 228
 229 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover {
 230   background-color: rgba(212, 83, 83, 0.05);
 231 }
 232
 233 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active {
 234   background-color: rgba(212, 83, 83, 0.1);
 235 }
 236
 237 .oo-ui-processDialog-content .oo-ui-window-head {
 238   height: 3.4em;
 239 }
 240
 241 .oo-ui-processDialog-content .oo-ui-window-body {
 242   top: 3.4em;
 243   box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.33);
 244 }
 245
 246 .oo-ui-processDialog-navigation {
 247   position: relative;
 248   height: 3.4em;
 249   padding: 0 1em;
 250 }
 251
 252 .oo-ui-processDialog-location {
 253   height: 1.9em;
 254   padding: 0.75em 0;
 255   text-align: center;
 256   cursor: default;
 257 }
 258
 259 .oo-ui-processDialog-title {
 260   font-weight: bold;
 261   line-height: 1.9em;
 262 }
 263
 264 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonedElement-button,
 265 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonedElement-button,
 266 .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonedElement-button {
 267   min-width: 1.9em;
 268   min-height: 1.9em;
 269   padding-top: 0.75em;
 270   padding-bottom: 0.75em;
 271 }
 272
 273 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-labeledElement-label,
 274 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-labeledElement-label,
 275 .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-labeledElement-label {
 276   padding: 0 1em;
 277   line-height: 1.9em;
 278 }
 279
 280 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-iconedElement-icon,
 281 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-iconedElement-icon,
 282 .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-iconedElement-icon {
 283   position: absolute;
 284   margin-top: -0.125em;
 285 }
 286
 287 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button,
 288 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button,
 289 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button {
 290   padding: 0;
 291   vertical-align: middle;
 292 }
 293
 294 .oo-ui-processDialog-actions-safe.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button,
 295 .oo-ui-processDialog-actions-primary.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button {
 296   margin: 0.75em;
 297 }
 298
 299 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget:hover,
 300 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget:hover {
 301   background-color: rgba(0, 0, 0, 0.05);
 302 }
 303
 304 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget:active,
 305 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget:active {
 306   background-color: rgba(0, 0, 0, 0.1);
 307 }
 308
 309 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover,
 310 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover {
 311   background-color: rgba(8, 126, 204, 0.05);
 312 }
 313
 314 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active,
 315 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active {
 316   background-color: rgba(8, 126, 204, 0.1);
 317 }
 318
 319 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label,
 320 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label {
 321   font-weight: bold;
 322 }
 323
 324 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover,
 325 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover {
 326   background-color: rgba(118, 171, 54, 0.05);
 327 }
 328
 329 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active,
 330 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active {
 331   background-color: rgba(118, 171, 54, 0.1);
 332 }
 333
 334 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover,
 335 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover {
 336   background-color: rgba(212, 83, 83, 0.05);
 337 }
 338
 339 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active,
 340 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active {
 341   background-color: rgba(212, 83, 83, 0.1);
 342 }
 343
 344 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon {
 345   left: 0.5em;
 346 }
 347
 348 .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-labeledElement-label {
 349   padding-left: 2.25em;
 350 }
 351
 352 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon {
 353   right: 0.5em;
 354 }
 355
 356 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-labeledElement-label {
 357   padding-right: 2.25em;
 358 }
 359
 360 .oo-ui-processDialog-actions-other:not(:empty) {
 361   padding: 0.75em;
 362 }
 363
 364 .oo-ui-processDialog-actions-other:not(:empty) .oo-ui-actionWidget {
 365   margin: 0 0.75em 0 0;
 366 }
 367
 368 .oo-ui-processDialog > .oo-ui-window-frame {
 369   min-height: 5em;
 370 }
 371
 372 .oo-ui-processDialog-errors {
 373   padding: 3em 3em 1.5em 3em;
 374   text-align: center;
 375   background-color: rgba(255, 255, 255, 0.9);
 376 }
 377
 378 .oo-ui-processDialog-errors .oo-ui-buttonWidget {
 379   margin: 2em 1em 2em 1em;
 380 }
 381
 382 .oo-ui-processDialog-errors-title {
 383   margin-bottom: 2em;
 384   font-size: 1.5em;
 385   color: #000;
 386 }
 387
 388 .oo-ui-processDialog-error {
 389   padding: 1em;
 390   margin: 1em;
 391   text-align: left;
 392   background-color: #fff7f7;
 393   border: solid 1px #ff9e9e;
 394   border-radius: 0.25em;
 395 }
 396
 397 .oo-ui-buttonedElement > .oo-ui-buttonedElement-button {
 398   color: #333;
 399 }
 400
 401 .oo-ui-buttonedElement.oo-ui-indicatedElement > .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator,
 402 .oo-ui-buttonedElement.oo-ui-iconedElement > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 403   width: 1.9em;
 404   height: 1.9em;
 405   opacity: 0.8;
 406 }
 407
 408 .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 409   /* Don't animate opacities for now, causes wiggling in Chrome (bug 63020) */
 410
 411   /*.oo-ui-transition(opacity 200ms);*/
 412
 413 }
 414
 415 .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button:hover > .oo-ui-iconedElement-icon,
 416 .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button:focus > .oo-ui-iconedElement-icon {
 417   opacity: 1;
 418 }
 419
 420 .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button:hover > .oo-ui-labeledElement-label,
 421 .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button:focus > .oo-ui-labeledElement-label {
 422   color: #000;
 423 }
 424
 425 .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 426   color: #333;
 427 }
 428
 429 .oo-ui-buttonedElement-frameless.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 430   color: #087ecc;
 431 }
 432
 433 .oo-ui-buttonedElement-frameless.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 434   color: #76ab36;
 435 }
 436
 437 .oo-ui-buttonedElement-frameless.oo-ui-flaggableElement-destructive > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 438   color: #d45353;
 439 }
 440
 441 .oo-ui-buttonedElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 442   opacity: 0.2;
 443 }
 444
 445 .oo-ui-buttonedElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 446   color: #ccc;
 447 }
 448
 449 .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button {
 450   padding: 0.2em 0.8em;
 451   margin: 0.1em 0;
 452   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 453   background: #eeeeee;
 454   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
 455   background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 456   background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 457   background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 458   background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 459   background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
 460   border: 1px #c9c9c9 solid;
 461   border-radius: 0.3em;
 462   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd');
 463   -webkit-transition: border-color 100ms ease-in-out;
 464      -moz-transition: border-color 100ms ease-in-out;
 465       -ms-transition: border-color 100ms ease-in-out;
 466        -o-transition: border-color 100ms ease-in-out;
 467           transition: border-color 100ms ease-in-out;
 468 }
 469
 470 .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button:hover,
 471 .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button:focus {
 472   border-color: #aaa;
 473 }
 474
 475 .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active,
 476 .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed {
 477   color: black;
 478   background: #eeeeee;
 479   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #dddddd), color-stop(100%, #ffffff));
 480   background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 481   background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 482   background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 483   background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 484   background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%);
 485   border-color: #c9c9c9;
 486   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff');
 487   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
 488 }
 489
 490 .oo-ui-buttonedElement-framed.oo-ui-iconedElement > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 491   margin-right: -0.5em;
 492   margin-left: -0.5em;
 493 }
 494
 495 .oo-ui-buttonedElement-framed.oo-ui-iconedElement.oo-ui-labeledElement > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 496   margin-right: 0.3em;
 497   margin-left: -0.5em;
 498 }
 499
 500 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button {
 501   background: #cde7f4;
 502   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #eaf4fa), color-stop(100%, #b0d9ee));
 503   background-image: -webkit-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 504   background-image: -moz-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 505   background-image: -ms-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 506   background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 507   background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 508   border: solid 1px #a6cee1;
 509   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#eaf4fa', endColorstr='#b0d9ee');
 510 }
 511
 512 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button:hover,
 513 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button:focus {
 514   border-color: #9dc2d4;
 515 }
 516
 517 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active,
 518 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed {
 519   background: #cde7f4;
 520   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #b0d9ee), color-stop(100%, #eaf4fa));
 521   background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 522   background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 523   background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 524   background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 525   background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 526   border: solid 1px #a6cee1;
 527   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa');
 528 }
 529
 530 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button {
 531   background: #daf0be;
 532   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f0fbe1), color-stop(100%, #c3e59a));
 533   background-image: -webkit-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 534   background-image: -moz-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 535   background-image: -ms-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 536   background-image: -o-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 537   background-image: linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 538   border: solid 1px #b8d892;
 539   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f0fbe1', endColorstr='#c3e59a');
 540 }
 541
 542 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button:hover,
 543 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button:focus {
 544   border-color: #adcb89;
 545 }
 546
 547 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active,
 548 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed {
 549   background: #daf0be;
 550   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #c3e59a), color-stop(100%, #f0fbe1));
 551   background-image: -webkit-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 552   background-image: -moz-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 553   background-image: -ms-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 554   background-image: -o-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 555   background-image: linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 556   border: solid 1px #b8d892;
 557   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#c3e59a', endColorstr='#f0fbe1');
 558 }
 559
 560 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-destructive > .oo-ui-buttonedElement-button {
 561   color: #d45353;
 562 }
 563
 564 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button,
 565 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active,
 566 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed {
 567   color: #333;
 568   background: #eee;
 569   border-color: #ccc;
 570   opacity: 0.5;
 571   box-shadow: none;
 572 }
 573
 574 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button:hover,
 575 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active:hover,
 576 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed:hover,
 577 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button:focus,
 578 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active:focus,
 579 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed:focus {
 580   border-color: #ccc;
 581   box-shadow: none;
 582 }
 583
 584 .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout {
 585   padding: 1.5em;
 586 }
 587
 588 .oo-ui-bookletLayout-outlinePanel {
 589   border-right: solid 1px #ddd;
 590 }
 591
 592 .oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget {
 593   box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
 594 }
 595
 596 .oo-ui-fieldLayout-disabled .oo-ui-labeledElement-label {
 597   color: #ccc;
 598 }
 599
 600 .oo-ui-fieldsetLayout {
 601   border: none;
 602 }
 603
 604 .oo-ui-fieldsetLayout > .oo-ui-labeledElement-label {
 605   font-size: 1.5em;
 606 }
 607
 608 .oo-ui-panelLayout-padded {
 609   padding: 1.25em;
 610 }
 611
 612 .oo-ui-barToolGroup .oo-ui-tool {
 613   margin: -1px 0 -1px -1px;
 614   border: solid 1px transparent;
 615 }
 616
 617 .oo-ui-barToolGroup .oo-ui-tool:first-child {
 618   border-bottom-left-radius: 0.25em;
 619   border-top-left-radius: 0.25em;
 620 }
 621
 622 .oo-ui-barToolGroup .oo-ui-tool:last-child {
 623   margin-right: -1px;
 624   border-top-right-radius: 0.25em;
 625   border-bottom-right-radius: 0.25em;
 626 }
 627
 628 .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 629   opacity: 0.8;
 630 }
 631
 632 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled:hover {
 633   border-color: rgba(0, 0, 0, 0.2);
 634 }
 635
 636 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-active.oo-ui-widget-enabled {
 637   background: #f8fbfd;
 638   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff));
 639   background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 640   background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 641   background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 642   background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 643   background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 644   border-color: rgba(0, 0, 0, 0.2);
 645   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff');
 646   box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
 647 }
 648
 649 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
 650   border-left-color: rgba(0, 0, 0, 0.1);
 651 }
 652
 653 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 654   opacity: 0.2;
 655 }
 656
 657 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 658   opacity: 0.8;
 659 }
 660
 661 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon {
 662   opacity: 1;
 663 }
 664
 665 .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 666   opacity: 0.2;
 667 }
 668
 669 .oo-ui-listToolGroup.oo-ui-popupToolGroup-active {
 670   border-color: rgba(0, 0, 0, 0.2);
 671 }
 672
 673 .oo-ui-listToolGroup .oo-ui-tool {
 674   margin: -1px 0;
 675   border: solid 1px transparent;
 676 }
 677
 678 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
 679   background: #f8fbfd;
 680   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff));
 681   background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 682   background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 683   background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 684   background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 685   background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 686   border-color: rgba(0, 0, 0, 0.1);
 687   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff');
 688   box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
 689 }
 690
 691 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
 692   border-top-color: rgba(0, 0, 0, 0.1);
 693 }
 694
 695 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
 696   border-color: rgba(0, 0, 0, 0.2);
 697 }
 698
 699 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 700   border-color: rgba(0, 0, 0, 0.2);
 701 }
 702
 703 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 704   opacity: 0.8;
 705 }
 706
 707 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon {
 708   opacity: 1;
 709 }
 710
 711 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
 712   color: #ccc;
 713 }
 714
 715 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 716   opacity: 0.2;
 717 }
 718
 719 .oo-ui-listToolGroup.oo-ui-widget-disabled {
 720   color: #ccc;
 721 }
 722
 723 .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator,
 724 .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-iconedElement-icon {
 725   opacity: 0.2;
 726 }
 727
 728 .oo-ui-menuToolGroup {
 729   border-color: rgba(0, 0, 0, 0.1);
 730 }
 731
 732 .oo-ui-menuToolGroup.oo-ui-widget-enabled:hover {
 733   border-color: rgba(0, 0, 0, 0.2);
 734 }
 735
 736 .oo-ui-menuToolGroup.oo-ui-popupToolGroup-active {
 737   border-color: rgba(0, 0, 0, 0.25);
 738 }
 739
 740 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 741   background-color: #e1f3ff;
 742 }
 743
 744 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
 745   color: #ccc;
 746 }
 747
 748 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 749   opacity: 0.2;
 750 }
 751
 752 .oo-ui-menuToolGroup.oo-ui-widget-disabled {
 753   color: #ccc;
 754   border-color: rgba(0, 0, 0, 0.05);
 755 }
 756
 757 .oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator,
 758 .oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-iconedElement-icon {
 759   opacity: 0.2;
 760 }
 761
 762 .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator,
 763 .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon {
 764   opacity: 0.8;
 765 }
 766
 767 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 768   background-color: white;
 769   border: solid 1px #ccc;
 770   box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25);
 771 }
 772
 773 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled {
 774   background: #f8fbfd;
 775   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff));
 776   background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 777   background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 778   background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 779   background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 780   background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 781   border-bottom-right-radius: 0;
 782   border-bottom-left-radius: 0;
 783   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff');
 784   box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
 785 }
 786
 787 .oo-ui-optionWidget {
 788   padding: 0.5em 2em 0.5em 3em;
 789 }
 790
 791 .oo-ui-optionWidget-highlighted {
 792   background-color: #e1f3ff;
 793 }
 794
 795 .oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected {
 796   background-color: #a7dcff;
 797 }
 798
 799 .oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed {
 800   background-color: #a7dcff;
 801 }
 802
 803 .oo-ui-optionWidget.oo-ui-widget-disabled {
 804   color: #ccc;
 805 }
 806
 807 .oo-ui-menuWidget {
 808   margin-top: -1px;
 809   background: #fff;
 810   border: solid 1px #ccc;
 811   border-radius: 0 0 0.25em 0.25em;
 812   box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
 813 }
 814
 815 .oo-ui-popupWidget-popup {
 816   background-color: #fff;
 817   border: solid 1px #ccc;
 818   border-radius: 0.25em;
 819   box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
 820 }
 821
 822 .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor {
 823   width: 15px;
 824   height: 8px;
 825   margin-left: -7px;
 826   background-image: /* @embed */ url(images/anchor.svg);
 827 }
 828
 829 .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup {
 830   -webkit-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 831      -moz-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 832       -ms-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 833        -o-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 834           transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 835 }
 836
 837 .oo-ui-popupWidget-body {
 838   box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25);
 839 }
 840
 841 .oo-ui-buttonGroupWidget {
 842   display: inline-block;
 843   white-space: nowrap;
 844 }
 845
 846 .oo-ui-buttonOptionWidget {
 847   padding: 0;
 848 }
 849
 850 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected,
 851 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
 852 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted {
 853   background-color: transparent;
 854 }
 855
 856 .oo-ui-buttonSelectWidget {
 857   border-radius: 0.3em;
 858 }
 859
 860 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button {
 861   margin-left: -1px;
 862   border-radius: 0;
 863 }
 864
 865 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button {
 866   margin-left: 0;
 867   border-bottom-left-radius: 0.3em;
 868   border-top-left-radius: 0.3em;
 869 }
 870
 871 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonedElement-button {
 872   border-top-right-radius: 0.3em;
 873   border-bottom-right-radius: 0.3em;
 874 }
 875
 876 .oo-ui-inlineMenuWidget-handle {
 877   border: solid 1px rgba(0, 0, 0, 0.1);
 878   border-radius: 0.25em;
 879 }
 880
 881 .oo-ui-inlineMenuWidget-handle:hover {
 882   border-color: rgba(0, 0, 0, 0.2);
 883 }
 884
 885 .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator,
 886 .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon {
 887   opacity: 0.8;
 888 }
 889
 890 .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-inlineMenuWidget-handle {
 891   color: #ccc;
 892   text-shadow: 0 1px 1px #fff;
 893   background-color: #f3f3f3;
 894   border-color: #ddd;
 895 }
 896
 897 .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator {
 898   opacity: 0.2;
 899 }
 900
 901 .oo-ui-menuItemWidget.oo-ui-optionWidget-selected {
 902   background-color: transparent;
 903 }
 904
 905 .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted,
 906 .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected {
 907   background-color: #e1f3ff;
 908 }
 909
 910 .oo-ui-menuSectionItemWidget {
 911   padding: 0.33em 0.75em;
 912   color: #888;
 913 }
 914
 915 .oo-ui-outlineControlsWidget {
 916   background-color: #fff;
 917 }
 918
 919 .oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon {
 920   opacity: 0.2;
 921 }
 922
 923 .oo-ui-outlineItemWidget {
 924   font-size: 1.1em;
 925 }
 926
 927 .oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label {
 928   padding-right: 1.5em;
 929 }
 930
 931 .oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator {
 932   opacity: 0.5;
 933 }
 934
 935 .oo-ui-outlineItemWidget-level-0 {
 936   padding-left: 3.5em;
 937 }
 938
 939 .oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon {
 940   left: 1em;
 941 }
 942
 943 .oo-ui-outlineItemWidget-level-1 {
 944   padding-left: 5em;
 945 }
 946
 947 .oo-ui-outlineItemWidget-level-1 .oo-ui-iconedElement-icon {
 948   left: 2.5em;
 949 }
 950
 951 .oo-ui-outlineItemWidget-level-2 {
 952   padding-left: 6.5em;
 953 }
 954
 955 .oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon {
 956   left: 4em;
 957 }
 958
 959 .oo-ui-selectWidget-depressed .oo-ui-outlineItemWidget.oo-ui-optionWidget-selected {
 960   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 961   background-color: #a7dcff;
 962 }
 963
 964 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-important {
 965   font-weight: bold;
 966 }
 967
 968 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder {
 969   font-style: italic;
 970 }
 971
 972 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-iconedElement-icon {
 973   opacity: 0.5;
 974 }
 975
 976 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label {
 977   color: #777;
 978 }
 979
 980 .oo-ui-searchWidget-query {
 981   box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
 982 }
 983
 984 .oo-ui-textInputWidget {
 985   width: 20em;
 986 }
 987
 988 .oo-ui-textInputWidget input,
 989 .oo-ui-textInputWidget textarea {
 990   padding: 0.5em;
 991   font-family: sans-serif;
 992   font-size: 1em;
 993   background-color: #fff;
 994   border: solid 1px #ccc;
 995   border-radius: 0.25em;
 996   box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
 997   -webkit-transition: border-color 200ms, box-shadow 200ms;
 998      -moz-transition: border-color 200ms, box-shadow 200ms;
 999       -ms-transition: border-color 200ms, box-shadow 200ms;
1000        -o-transition: border-color 200ms, box-shadow 200ms;
1001           transition: border-color 200ms, box-shadow 200ms;
1002 }
1003
1004 .oo-ui-textInputWidget-decorated input,
1005 .oo-ui-textInputWidget-decorated textarea {
1006   padding-left: 2em;
1007 }
1008
1009 .oo-ui-textInputWidget-icon {
1010   width: 2em;
1011 }
1012
1013 .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
1014 .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus {
1015   border-color: #a7dcff;
1016   outline: none;
1017   box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
1018 }
1019
1020 .oo-ui-textInputWidget input[readonly],
1021 .oo-ui-textInputWidget textarea[readonly] {
1022   color: #777;
1023   text-shadow: 0 1px 1px #fff;
1024 }
1025
1026 .oo-ui-textInputWidget-pending input,
1027 .oo-ui-textInputWidget-pending textarea {
1028   background-color: transparent;
1029 }
1030
1031 .oo-ui-textInputWidget.oo-ui-widget-disabled input,
1032 .oo-ui-textInputWidget.oo-ui-widget-disabled input:focus,
1033 .oo-ui-textInputWidget.oo-ui-widget-disabled textarea,
1034 .oo-ui-textInputWidget.oo-ui-widget-disabled textarea:focus {
1035   color: #ccc;
1036   text-shadow: 0 1px 1px #fff;
1037   background-color: #f3f3f3;
1038   border-color: #ddd;
1039 }
1040
1041 .oo-ui-toggleSwitchWidget {
1042   background: #eeeeee;
1043   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #dddddd), color-stop(100%, #ffffff));
1044   background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1045   background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1046   background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1047   background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1048   background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%);
1049   border: solid 1px #ccc;
1050   border-radius: 1em;
1051   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff');
1052   box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
1053 }
1054
1055 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
1056   opacity: 0.5;
1057 }
1058
1059 .oo-ui-toggleSwitchWidget-grip {
1060   background: #eeeeee;
1061   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
1062   background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1063   background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1064   background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1065   background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1066   background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
1067   border: 1px #c9c9c9 solid;
1068   border-radius: 1em;
1069   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd');
1070   box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
1071 }
1072
1073 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover,
1074 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
1075   border-color: #aaa;
1076 }
1077
1078 .oo-ui-toggleSwitchWidget .oo-ui-toggleSwitchWidget-glow {
1079   background: #cde7f4;
1080   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #b0d9ee), color-stop(100%, #eaf4fa));
1081   background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1082   background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1083   background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1084   background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1085   background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1086   border-radius: 1em;
1087   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa');
1088   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
1089 }
1090
1091 .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-glow {
1092   opacity: 1;
1093 }
1094
1095 .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow {
1096   display: block;
1097   opacity: 0;
1098 }