resources/lib/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.oo-ui-widget-enabled:hover {
  90   border-color: rgba(0, 0, 0, 0.1);
  91 }
  92
  93 .oo-ui-toolGroup.oo-ui-widget-enabled .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   border-color: #ccc;
 268   opacity: 0.5;
 269   box-shadow: none;
 270 }
 271
 272 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button:hover,
 273 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active:hover,
 274 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed:hover,
 275 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button:focus,
 276 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active:focus,
 277 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed:focus {
 278   border-color: #ccc;
 279   box-shadow: none;
 280 }
 281
 282 .oo-ui-bookletLayout > .oo-ui-gridLayout > .oo-ui-panelLayout {
 283   -webkit-transition: width 250ms ease-in-out, height 250ms ease-in-out, top 250ms ease-in-out, left 250ms ease-in-out;
 284      -moz-transition: width 250ms ease-in-out, height 250ms ease-in-out, top 250ms ease-in-out, left 250ms ease-in-out;
 285       -ms-transition: width 250ms ease-in-out, height 250ms ease-in-out, top 250ms ease-in-out, left 250ms ease-in-out;
 286        -o-transition: width 250ms ease-in-out, height 250ms ease-in-out, top 250ms ease-in-out, left 250ms ease-in-out;
 287           transition: width 250ms ease-in-out, height 250ms ease-in-out, top 250ms ease-in-out, left 250ms ease-in-out;
 288 }
 289
 290 .oo-ui-bookletLayout-outlinePanel {
 291   border-right: solid 1px #ddd;
 292 }
 293
 294 .oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget {
 295   box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
 296 }
 297
 298 .oo-ui-fieldsetLayout {
 299   border: none;
 300 }
 301
 302 .oo-ui-fieldsetLayout > legend.oo-ui-labeledElement-label {
 303   font-size: 1.5em;
 304 }
 305
 306 .oo-ui-barToolGroup .oo-ui-tool {
 307   margin: -1px 0 -1px -1px;
 308   border: solid 1px transparent;
 309 }
 310
 311 .oo-ui-barToolGroup .oo-ui-tool:first-child {
 312   border-bottom-left-radius: 0.25em;
 313   border-top-left-radius: 0.25em;
 314 }
 315
 316 .oo-ui-barToolGroup .oo-ui-tool:last-child {
 317   margin-right: -1px;
 318   border-top-right-radius: 0.25em;
 319   border-bottom-right-radius: 0.25em;
 320 }
 321
 322 .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 323   opacity: 0.8;
 324 }
 325
 326 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled:hover {
 327   border-color: rgba(0, 0, 0, 0.2);
 328 }
 329
 330 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-active.oo-ui-widget-enabled {
 331   background: #f8fbfd;
 332   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff));
 333   background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 334   background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 335   background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 336   background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 337   background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 338   border-color: rgba(0, 0, 0, 0.2);
 339   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff');
 340   box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
 341 }
 342
 343 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
 344   border-left-color: rgba(0, 0, 0, 0.1);
 345 }
 346
 347 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 348   opacity: 0.2;
 349 }
 350
 351 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 352   opacity: 0.8;
 353 }
 354
 355 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon {
 356   opacity: 1;
 357 }
 358
 359 .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 360   opacity: 0.2;
 361 }
 362
 363 .oo-ui-listToolGroup.oo-ui-popupToolGroup-active {
 364   border-color: rgba(0, 0, 0, 0.2);
 365 }
 366
 367 .oo-ui-listToolGroup .oo-ui-tool {
 368   margin: -1px 0;
 369   border: solid 1px transparent;
 370 }
 371
 372 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
 373   background: #f8fbfd;
 374   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff));
 375   background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 376   background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 377   background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 378   background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 379   background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 380   border-color: rgba(0, 0, 0, 0.1);
 381   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff');
 382   box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
 383 }
 384
 385 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
 386   border-top-color: rgba(0, 0, 0, 0.1);
 387 }
 388
 389 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
 390   border-color: rgba(0, 0, 0, 0.2);
 391 }
 392
 393 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 394   border-color: rgba(0, 0, 0, 0.2);
 395 }
 396
 397 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 398   opacity: 0.8;
 399 }
 400
 401 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon {
 402   opacity: 1;
 403 }
 404
 405 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
 406   color: #ccc;
 407 }
 408
 409 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 410   opacity: 0.2;
 411 }
 412
 413 .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator,
 414 .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-iconedElement-icon {
 415   opacity: 0.2;
 416 }
 417
 418 .oo-ui-menuToolGroup {
 419   border-color: rgba(0, 0, 0, 0.1);
 420 }
 421
 422 .oo-ui-menuToolGroup.oo-ui-widget-enabled:hover {
 423   border-color: rgba(0, 0, 0, 0.2);
 424 }
 425
 426 .oo-ui-menuToolGroup.oo-ui-popupToolGroup-active {
 427   border-color: rgba(0, 0, 0, 0.25);
 428 }
 429
 430 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 431   background-color: #e1f3ff;
 432 }
 433
 434 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
 435   color: #ccc;
 436 }
 437
 438 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 439   opacity: 0.2;
 440 }
 441
 442 .oo-ui-menuToolGroup.oo-ui-widget-disabled {
 443   color: #ccc;
 444   text-shadow: 0 1px 1px #fff;
 445   background-color: #f3f3f3;
 446   border-color: #ddd;
 447 }
 448
 449 .oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator,
 450 .oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-iconedElement-icon {
 451   opacity: 0.2;
 452 }
 453
 454 .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator,
 455 .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon {
 456   opacity: 0.8;
 457 }
 458
 459 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 460   background-color: white;
 461   border: solid 1px #ccc;
 462   box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25);
 463 }
 464
 465 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled {
 466   background: #f8fbfd;
 467   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff));
 468   background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 469   background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 470   background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 471   background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 472   background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%);
 473   border-bottom-right-radius: 0;
 474   border-bottom-left-radius: 0;
 475   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff');
 476   box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
 477 }
 478
 479 .oo-ui-optionWidget {
 480   padding: 0.5em 2em 0.5em 3em;
 481 }
 482
 483 .oo-ui-optionWidget-highlighted {
 484   background-color: #e1f3ff;
 485 }
 486
 487 .oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected {
 488   background-color: #a7dcff;
 489 }
 490
 491 .oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed {
 492   background-color: #a7dcff;
 493 }
 494
 495 .oo-ui-optionWidget.oo-ui-widget-disabled {
 496   color: #ccc;
 497 }
 498
 499 .oo-ui-menuWidget {
 500   margin-top: -1px;
 501   background: #fff;
 502   border: solid 1px #ccc;
 503   border-radius: 0 0 0.25em 0.25em;
 504   box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
 505 }
 506
 507 .oo-ui-popupWidget-popup {
 508   background-color: #fff;
 509   border: solid 1px #ccc;
 510   border-radius: 0.25em;
 511   box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
 512 }
 513
 514 .oo-ui-popupWidget-tailed .oo-ui-popupWidget-tail {
 515   width: 15px;
 516   height: 8px;
 517   margin-left: -7px;
 518   background-image: /* @embed */ url(images/tail.svg);
 519 }
 520
 521 .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup {
 522   -webkit-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 523      -moz-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 524       -ms-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 525        -o-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 526           transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 527 }
 528
 529 .oo-ui-popupWidget-body {
 530   box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25);
 531 }
 532
 533 .oo-ui-buttonGroupWidget {
 534   display: inline-block;
 535   white-space: nowrap;
 536 }
 537
 538 .oo-ui-buttonOptionWidget {
 539   padding: 0;
 540 }
 541
 542 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected,
 543 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
 544 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted {
 545   background-color: transparent;
 546 }
 547
 548 .oo-ui-buttonSelectWidget {
 549   border-radius: 0.3em;
 550 }
 551
 552 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button {
 553   margin-left: -1px;
 554   border-radius: 0;
 555 }
 556
 557 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button {
 558   margin-left: 0;
 559   border-bottom-left-radius: 0.3em;
 560   border-top-left-radius: 0.3em;
 561 }
 562
 563 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonedElement-button {
 564   border-top-right-radius: 0.3em;
 565   border-bottom-right-radius: 0.3em;
 566 }
 567
 568 .oo-ui-inlineMenuWidget-handle {
 569   border: solid 1px rgba(0, 0, 0, 0.1);
 570   border-radius: 0.25em;
 571 }
 572
 573 .oo-ui-inlineMenuWidget-handle:hover {
 574   border-color: rgba(0, 0, 0, 0.2);
 575 }
 576
 577 .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator,
 578 .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon {
 579   opacity: 0.8;
 580 }
 581
 582 .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-inlineMenuWidget-handle {
 583   color: #ccc;
 584   text-shadow: 0 1px 1px #fff;
 585   background-color: #f3f3f3;
 586   border-color: #ddd;
 587 }
 588
 589 .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator {
 590   opacity: 0.2;
 591 }
 592
 593 .oo-ui-menuItemWidget.oo-ui-optionWidget-selected {
 594   background-color: transparent;
 595 }
 596
 597 .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted,
 598 .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected {
 599   background-color: #e1f3ff;
 600 }
 601
 602 .oo-ui-menuSectionItemWidget {
 603   padding: 0.33em 0.75em;
 604   color: #888;
 605 }
 606
 607 .oo-ui-outlineControlsWidget {
 608   background-color: #fff;
 609 }
 610
 611 .oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon {
 612   opacity: 0.2;
 613 }
 614
 615 .oo-ui-outlineItemWidget {
 616   font-size: 1.1em;
 617 }
 618
 619 .oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label {
 620   padding-right: 1.5em;
 621 }
 622
 623 .oo-ui-outlineItemWidget-level-0 {
 624   padding-left: 3.5em;
 625 }
 626
 627 .oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon {
 628   left: 1em;
 629 }
 630
 631 .oo-ui-outlineItemWidget-level-1 {
 632   padding-left: 5em;
 633 }
 634
 635 .oo-ui-outlineItemWidget-level-1 .oo-ui-iconedElement-icon {
 636   left: 2.5em;
 637 }
 638
 639 .oo-ui-outlineItemWidget-level-2 {
 640   padding-left: 6.5em;
 641 }
 642
 643 .oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon {
 644   left: 4em;
 645 }
 646
 647 .oo-ui-selectWidget-depressed .oo-ui-outlineItemWidget.oo-ui-optionWidget-selected {
 648   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 649   background-color: #a7dcff;
 650 }
 651
 652 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-important {
 653   font-weight: bold;
 654 }
 655
 656 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder {
 657   font-style: italic;
 658 }
 659
 660 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-iconedElement-icon,
 661 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-indicatedElement-indicator {
 662   opacity: 0.5;
 663 }
 664
 665 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label {
 666   color: #777;
 667 }
 668
 669 .oo-ui-searchWidget-query {
 670   box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
 671 }
 672
 673 .oo-ui-textInputWidget {
 674   width: 20em;
 675 }
 676
 677 .oo-ui-textInputWidget input,
 678 .oo-ui-textInputWidget textarea {
 679   padding: 0.5em;
 680   font-family: sans-serif;
 681   font-size: 1em;
 682   background-color: #fff;
 683   border: solid 1px #ccc;
 684   border-radius: 0.25em;
 685   box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
 686   -webkit-transition: border-color 200ms, box-shadow 200ms;
 687      -moz-transition: border-color 200ms, box-shadow 200ms;
 688       -ms-transition: border-color 200ms, box-shadow 200ms;
 689        -o-transition: border-color 200ms, box-shadow 200ms;
 690           transition: border-color 200ms, box-shadow 200ms;
 691 }
 692
 693 .oo-ui-textInputWidget-decorated input,
 694 .oo-ui-textInputWidget-decorated textarea {
 695   padding-left: 2em;
 696 }
 697
 698 .oo-ui-textInputWidget-icon {
 699   width: 2em;
 700 }
 701
 702 .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
 703 .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus {
 704   border-color: #a7dcff;
 705   outline: none;
 706   box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
 707 }
 708
 709 .oo-ui-textInputWidget input[readonly],
 710 .oo-ui-textInputWidget textarea[readonly] {
 711   color: #777;
 712   text-shadow: 0 1px 1px #fff;
 713 }
 714
 715 .oo-ui-textInputWidget-pending input,
 716 .oo-ui-textInputWidget-pending textarea {
 717   background-color: transparent;
 718 }
 719
 720 .oo-ui-textInputWidget.oo-ui-widget-disabled input,
 721 .oo-ui-textInputWidget.oo-ui-widget-disabled input:focus,
 722 .oo-ui-textInputWidget.oo-ui-widget-disabled textarea,
 723 .oo-ui-textInputWidget.oo-ui-widget-disabled textarea:focus {
 724   color: #ccc;
 725   text-shadow: 0 1px 1px #fff;
 726   background-color: #f3f3f3;
 727   border-color: #ddd;
 728 }
 729
 730 .oo-ui-toggleSwitchWidget {
 731   background: #eeeeee;
 732   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #dddddd), color-stop(100%, #ffffff));
 733   background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 734   background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 735   background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 736   background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 737   background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%);
 738   border: solid 1px #ccc;
 739   border-radius: 1em;
 740   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff');
 741   box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
 742 }
 743
 744 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
 745   opacity: 0.5;
 746 }
 747
 748 .oo-ui-toggleSwitchWidget-grip {
 749   background: #eeeeee;
 750   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
 751   background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 752   background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 753   background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 754   background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 755   background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
 756   border: 1px #c9c9c9 solid;
 757   border-radius: 1em;
 758   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd');
 759   box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
 760 }
 761
 762 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover,
 763 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
 764   border-color: #aaa;
 765 }
 766
 767 .oo-ui-toggleSwitchWidget .oo-ui-toggleSwitchWidget-glow {
 768   background: #cde7f4;
 769   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #b0d9ee), color-stop(100%, #eaf4fa));
 770   background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 771   background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 772   background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 773   background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 774   background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 775   border-radius: 1em;
 776   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa');
 777   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
 778 }
 779
 780 .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-glow {
 781   opacity: 1;
 782 }
 783
 784 .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow {
 785   display: block;
 786   opacity: 0;
 787 }