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

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