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.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-optionWidget-selected {
 488   background-color: #a7dcff;
 489 }
 490
 491 .oo-ui-optionWidget.oo-ui-widget-disabled {
 492   color: #ccc;
 493 }
 494
 495 .oo-ui-menuWidget {
 496   margin-top: -1px;
 497   background: #fff;
 498   border: solid 1px #ccc;
 499   border-radius: 0 0 0.25em 0.25em;
 500   box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
 501 }
 502
 503 .oo-ui-popupWidget-popup {
 504   background-color: #fff;
 505   border: solid 1px #ccc;
 506   border-radius: 0.25em;
 507   box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
 508 }
 509
 510 .oo-ui-popupWidget-tailed .oo-ui-popupWidget-tail {
 511   width: 15px;
 512   height: 8px;
 513   margin-left: -7px;
 514   background-image: /* @embed */ url(images/tail.svg);
 515 }
 516
 517 .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup {
 518   -webkit-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 519      -moz-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 520       -ms-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 521        -o-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 522           transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out;
 523 }
 524
 525 .oo-ui-popupWidget-body {
 526   box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25);
 527 }
 528
 529 .oo-ui-buttonGroupWidget {
 530   display: inline-block;
 531   white-space: nowrap;
 532 }
 533
 534 .oo-ui-buttonOptionWidget {
 535   padding: 0;
 536 }
 537
 538 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected,
 539 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted {
 540   background-color: transparent;
 541 }
 542
 543 .oo-ui-buttonSelectWidget {
 544   border-radius: 0.3em;
 545 }
 546
 547 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button {
 548   margin-left: -1px;
 549   border-radius: 0;
 550 }
 551
 552 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button {
 553   margin-left: 0;
 554   border-bottom-left-radius: 0.3em;
 555   border-top-left-radius: 0.3em;
 556 }
 557
 558 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonedElement-button {
 559   border-top-right-radius: 0.3em;
 560   border-bottom-right-radius: 0.3em;
 561 }
 562
 563 .oo-ui-inlineMenuWidget-handle {
 564   border: solid 1px rgba(0, 0, 0, 0.1);
 565   border-radius: 0.25em;
 566 }
 567
 568 .oo-ui-inlineMenuWidget-handle:hover {
 569   border-color: rgba(0, 0, 0, 0.2);
 570 }
 571
 572 .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator,
 573 .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon {
 574   opacity: 0.8;
 575 }
 576
 577 .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-inlineMenuWidget-handle {
 578   color: #ccc;
 579   text-shadow: 0 1px 1px #fff;
 580   background-color: #f3f3f3;
 581   border-color: #ddd;
 582 }
 583
 584 .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator {
 585   opacity: 0.2;
 586 }
 587
 588 .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted {
 589   background-color: #e1f3ff;
 590 }
 591
 592 .oo-ui-menuSectionItemWidget {
 593   padding: 0.33em 0.75em;
 594   color: #888;
 595 }
 596
 597 .oo-ui-outlineControlsWidget {
 598   background-color: #fff;
 599 }
 600
 601 .oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon {
 602   opacity: 0.2;
 603 }
 604
 605 .oo-ui-outlineItemWidget {
 606   font-size: 1.1em;
 607 }
 608
 609 .oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label {
 610   padding-right: 1.5em;
 611 }
 612
 613 .oo-ui-outlineItemWidget-level-0 {
 614   padding-left: 3.5em;
 615 }
 616
 617 .oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon {
 618   left: 1em;
 619 }
 620
 621 .oo-ui-outlineItemWidget-level-1 {
 622   padding-left: 5em;
 623 }
 624
 625 .oo-ui-outlineItemWidget-level-1 .oo-ui-iconedElement-icon {
 626   left: 2.5em;
 627 }
 628
 629 .oo-ui-outlineItemWidget-level-2 {
 630   padding-left: 6.5em;
 631 }
 632
 633 .oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon {
 634   left: 4em;
 635 }
 636
 637 .oo-ui-outlineItemWidget.oo-ui-optionWidget-selected {
 638   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 639   background-color: #a7dcff;
 640 }
 641
 642 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-important {
 643   font-weight: bold;
 644 }
 645
 646 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder {
 647   font-style: italic;
 648 }
 649
 650 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-iconedElement-icon,
 651 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-indicatedElement-indicator {
 652   opacity: 0.5;
 653 }
 654
 655 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label {
 656   color: #777;
 657 }
 658
 659 .oo-ui-searchWidget-query {
 660   box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
 661 }
 662
 663 .oo-ui-textInputWidget {
 664   width: 20em;
 665 }
 666
 667 .oo-ui-textInputWidget input,
 668 .oo-ui-textInputWidget textarea {
 669   padding: 0.5em;
 670   font-family: sans-serif;
 671   font-size: 1em;
 672   background-color: #fff;
 673   border: solid 1px #ccc;
 674   border-radius: 0.25em;
 675   box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
 676   -webkit-transition: border-color 200ms, box-shadow 200ms;
 677      -moz-transition: border-color 200ms, box-shadow 200ms;
 678       -ms-transition: border-color 200ms, box-shadow 200ms;
 679        -o-transition: border-color 200ms, box-shadow 200ms;
 680           transition: border-color 200ms, box-shadow 200ms;
 681 }
 682
 683 .oo-ui-textInputWidget-decorated input,
 684 .oo-ui-textInputWidget-decorated textarea {
 685   padding-left: 2em;
 686 }
 687
 688 .oo-ui-textInputWidget-icon {
 689   width: 2em;
 690 }
 691
 692 .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus,
 693 .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus {
 694   border-color: #a7dcff;
 695   outline: none;
 696   box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
 697 }
 698
 699 .oo-ui-textInputWidget input[readonly],
 700 .oo-ui-textInputWidget textarea[readonly] {
 701   color: #777;
 702   text-shadow: 0 1px 1px #fff;
 703 }
 704
 705 .oo-ui-textInputWidget-pending input,
 706 .oo-ui-textInputWidget-pending textarea {
 707   background-color: transparent;
 708 }
 709
 710 .oo-ui-textInputWidget.oo-ui-widget-disabled input,
 711 .oo-ui-textInputWidget.oo-ui-widget-disabled input:focus,
 712 .oo-ui-textInputWidget.oo-ui-widget-disabled textarea,
 713 .oo-ui-textInputWidget.oo-ui-widget-disabled textarea:focus {
 714   color: #ccc;
 715   text-shadow: 0 1px 1px #fff;
 716   background-color: #f3f3f3;
 717   border-color: #ddd;
 718 }
 719
 720 .oo-ui-toggleSwitchWidget {
 721   background: #eeeeee;
 722   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #dddddd), color-stop(100%, #ffffff));
 723   background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 724   background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 725   background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 726   background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 727   background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%);
 728   border: solid 1px #ccc;
 729   border-radius: 1em;
 730   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff');
 731   box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
 732 }
 733
 734 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
 735   opacity: 0.5;
 736 }
 737
 738 .oo-ui-toggleSwitchWidget-grip {
 739   background: #eeeeee;
 740   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
 741   background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 742   background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 743   background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 744   background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 745   background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
 746   border: 1px #c9c9c9 solid;
 747   border-radius: 1em;
 748   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd');
 749   box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
 750 }
 751
 752 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover,
 753 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
 754   border-color: #aaa;
 755 }
 756
 757 .oo-ui-toggleSwitchWidget .oo-ui-toggleSwitchWidget-glow {
 758   background: #cde7f4;
 759   background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #b0d9ee), color-stop(100%, #eaf4fa));
 760   background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 761   background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 762   background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 763   background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 764   background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 765   border-radius: 1em;
 766   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa');
 767   box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
 768 }
 769
 770 .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-glow {
 771   opacity: 1;
 772 }
 773
 774 .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow {
 775   display: block;
 776   opacity: 0;
 777 }