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