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