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

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