resources/lib/oojs-ui/oojs-ui-toolbars-wikimediaui.css

   1 /*!
   2  * OOjs UI v0.23.3
   3  * https://www.mediawiki.org/wiki/OOjs_UI
   4  *
   5  * Copyright 2011–2017 OOjs UI Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: 2017-10-04T01:20:45Z
  10  */
  11 /**
  12  * WikimediaUI Base v0.9.2
  13  * Wikimedia Foundation user interface base variables
  14  */
  15 /* Colors */
  16 /* Positioning */
  17 /* Box Model properties */
  18 /* Max Widths */
  19 /* Typography incl. print properties */
  20 /* Other Properties */
  21 /* Animation & Transition */
  22 .oo-ui-tool {
  23   -webkit-box-sizing: border-box;
  24   -moz-box-sizing: border-box;
  25   box-sizing: border-box;
  26 }
  27 .oo-ui-tool .oo-ui-tool-link {
  28   position: relative;
  29   -webkit-box-sizing: border-box;
  30   -moz-box-sizing: border-box;
  31   box-sizing: border-box;
  32   padding-top: 3.125em;
  33   padding-left: 3.125em;
  34 }
  35 .oo-ui-tool-with-label .oo-ui-tool-link {
  36   padding: 1.015625em 0.9375em 0.9375em 2.96875em;
  37 }
  38 .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
  39   display: block;
  40   position: absolute;
  41   top: 0;
  42   left: 0.625em;
  43   height: 100%;
  44 }
  45 .oo-ui-tool .oo-ui-tool-title {
  46   line-height: 1.172em;
  47 }
  48 .oo-ui-tool.oo-ui-widget-enabled {
  49   -webkit-transition: background-color 100ms;
  50   -moz-transition: background-color 100ms;
  51   transition: background-color 100ms;
  52 }
  53 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
  54   opacity: 0.87;
  55   -webkit-transition: opacity 100ms;
  56   -moz-transition: opacity 100ms;
  57   transition: opacity 100ms;
  58 }
  59 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title {
  60   -webkit-transition: color 100ms;
  61   -moz-transition: color 100ms;
  62   transition: color 100ms;
  63 }
  64 .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
  65   opacity: 1;
  66 }
  67 .oo-ui-tool.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] .oo-ui-iconElement-icon {
  68   opacity: 1;
  69 }
  70 .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
  71   opacity: 0.34;
  72 }
  73 .oo-ui-popupTool .oo-ui-popupWidget-popup,
  74 .oo-ui-popupTool .oo-ui-popupWidget-anchor {
  75   z-index: 4;
  76 }
  77 .oo-ui-toolGroupTool > .oo-ui-toolGroup {
  78   border-right: 0;
  79 }
  80 .oo-ui-toolGroup {
  81   display: inline-block;
  82   vertical-align: middle;
  83   -webkit-box-sizing: border-box;
  84   -moz-box-sizing: border-box;
  85   box-sizing: border-box;
  86   border-right: 1px solid #c8ccd1;
  87 }
  88 .oo-ui-toolGroup-empty {
  89   display: none;
  90 }
  91 .oo-ui-toolGroup .oo-ui-tool-link {
  92   text-decoration: none;
  93   cursor: pointer;
  94 }
  95 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-tool-link,
  96 .oo-ui-toolGroup .oo-ui-widget-disabled > .oo-ui-tool-link {
  97   outline: 0;
  98   cursor: default;
  99 }
 100 .oo-ui-toolbar-actions .oo-ui-toolGroup {
 101   border-right: 0;
 102   border-left: 1px solid #c8ccd1;
 103 }
 104 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
 105 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
 106   opacity: 0.34 !important;
 107 }
 108 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
 109   display: inline-block;
 110   position: relative;
 111   vertical-align: top;
 112 }
 113 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
 114   display: block;
 115 }
 116 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-accel {
 117   display: none;
 118 }
 119 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-iconElement-icon {
 120   display: inline-block;
 121   vertical-align: top;
 122 }
 123 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-tool-title {
 124   display: none;
 125 }
 126 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement.oo-ui-tool-with-label > .oo-ui-tool-link .oo-ui-tool-title {
 127   display: inline;
 128 }
 129 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.iconElement > .oo-ui-tool-link > .oo-ui-iconElement-icon {
 130   display: block;
 131 }
 132 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled:hover {
 133   background-color: #eaecf0;
 134 }
 135 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled > .oo-ui-tool-link .oo-ui-tool-title {
 136   color: #222;
 137   -webkit-transition: color 100ms;
 138   -moz-transition: color 100ms;
 139   transition: color 100ms;
 140 }
 141 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active {
 142   background-color: #eaf3ff;
 143 }
 144 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active:hover {
 145   background-color: rgba(41, 98, 204, 0.1);
 146 }
 147 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active > .oo-ui-tool-link .oo-ui-tool-title {
 148   color: #36c;
 149 }
 150 .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link .oo-ui-tool-title,
 151 .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
 152   color: #72777d;
 153 }
 154 .oo-ui-popupToolGroup {
 155   position: relative;
 156   min-width: 3.125em;
 157 }
 158 .oo-ui-popupToolGroup-handle {
 159   display: block;
 160   cursor: pointer;
 161 }
 162 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator,
 163 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
 164   position: absolute;
 165 }
 166 .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
 167   outline: 0;
 168   cursor: default;
 169 }
 170 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 171   display: none;
 172   position: absolute;
 173   z-index: 4;
 174 }
 175 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
 176   display: block;
 177 }
 178 .oo-ui-popupToolGroup-left > .oo-ui-toolGroup-tools {
 179   left: 0;
 180 }
 181 .oo-ui-popupToolGroup-right > .oo-ui-toolGroup-tools {
 182   right: 0;
 183 }
 184 .oo-ui-popupToolGroup .oo-ui-tool-link {
 185   display: table;
 186   width: 100%;
 187   vertical-align: middle;
 188   white-space: nowrap;
 189 }
 190 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon,
 191 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel,
 192 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
 193   display: table-cell;
 194   vertical-align: middle;
 195 }
 196 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
 197   text-align: right;
 198 }
 199 .oo-ui-popupToolGroup.oo-ui-indicatorElement:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) {
 200   min-width: 2.1875em;
 201 }
 202 .oo-ui-popupToolGroup-handle {
 203   -webkit-box-sizing: border-box;
 204   -moz-box-sizing: border-box;
 205   box-sizing: border-box;
 206 }
 207 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
 208 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 209   top: 0;
 210   height: 100%;
 211 }
 212 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
 213   left: 0.625em;
 214 }
 215 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 216   background-position: center 52%;
 217   right: 0.625em;
 218 }
 219 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 220   right: 0.3125em;
 221 }
 222 .oo-ui-popupToolGroup.oo-ui-iconElement .oo-ui-popupToolGroup-handle,
 223 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 224   padding-top: 3.125em;
 225 }
 226 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 227   padding-left: 3.125em;
 228 }
 229 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
 230   padding: 1.015625em 0.9375em 0.9375em;
 231 }
 232 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
 233   line-height: 1.172em;
 234 }
 235 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
 236   padding-left: 2.96875em;
 237 }
 238 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 239   padding-right: 2.1875em;
 240 }
 241 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 242   padding-right: 1.5625em;
 243 }
 244 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 245   padding-right: 1.25em;
 246 }
 247 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
 248   padding-right: 0.9375em;
 249 }
 250 .oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
 251   opacity: 1;
 252 }
 253 .oo-ui-popupToolGroup-header {
 254   color: #72777d;
 255   padding: 0 0.9375em;
 256   font-weight: bold;
 257   line-height: 2.5em;
 258 }
 259 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 260   margin: 0 -1px;
 261   border: 1px solid #c8ccd1;
 262   background-color: #fff;
 263   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
 264   min-width: 16em;
 265 }
 266 .oo-ui-toolbar-position-top .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 267   top: 3.125em;
 268 }
 269 .oo-ui-toolbar-position-bottom .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 270   bottom: 3.125em;
 271 }
 272 .oo-ui-popupToolGroup .oo-ui-tool-link {
 273   padding: 1.015625em 0.9375em 0.9375em 2.96875em;
 274 }
 275 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
 276   display: block;
 277 }
 278 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
 279   color: #222;
 280 }
 281 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
 282   color: #72777d;
 283   line-height: 1.172em;
 284 }
 285 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
 286   padding-left: 1.40625em;
 287 }
 288 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
 289   -webkit-transition: background-color 100ms, box-shadow 100ms;
 290   -moz-transition: background-color 100ms, box-shadow 100ms;
 291   transition: background-color 100ms, box-shadow 100ms;
 292 }
 293 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
 294   background-color: #eaecf0;
 295 }
 296 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
 297   background-color: #eaf3ff;
 298 }
 299 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
 300 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
 301   opacity: 0.87;
 302   -webkit-transition: opacity 100ms;
 303   -moz-transition: opacity 100ms;
 304   transition: opacity 100ms;
 305 }
 306 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon,
 307 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-iconElement-icon,
 308 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover .oo-ui-indicatorElement-indicator,
 309 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
 310   opacity: 1;
 311 }
 312 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon,
 313 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
 314   opacity: 1;
 315 }
 316 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
 317   background-color: #eaf3ff;
 318   color: #36c;
 319 }
 320 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover {
 321   background-color: rgba(41, 98, 204, 0.1);
 322   color: #36c;
 323 }
 324 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
 325   color: #36c;
 326 }
 327 .oo-ui-listToolGroup .oo-ui-tool {
 328   display: block;
 329   -webkit-box-sizing: border-box;
 330   -moz-box-sizing: border-box;
 331   box-sizing: border-box;
 332 }
 333 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 334   background-color: #eaecf0;
 335   color: #000;
 336 }
 337 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
 338   background-color: #eaf3ff;
 339 }
 340 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
 341   background-color: rgba(41, 98, 204, 0.1);
 342 }
 343 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
 344   color: #36c;
 345 }
 346 .oo-ui-listToolGroup.oo-ui-widget-disabled,
 347 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
 348   color: #72777d;
 349 }
 350 .oo-ui-menuToolGroup .oo-ui-tool {
 351   display: block;
 352 }
 353 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
 354   min-width: 10em;
 355 }
 356 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
 357   min-width: 8.125em;
 358 }
 359 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
 360   background-image: none;
 361   position: absolute;
 362   top: 0;
 363   left: 0.625em;
 364   height: 100%;
 365 }
 366 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconElement-icon {
 367   background-image: url('themes/wikimediaui/images/icons/check-progressive.png');
 368   background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url('themes/wikimediaui/images/icons/check-progressive.svg');
 369   background-image: linear-gradient(transparent, transparent), /* @embed */ url('themes/wikimediaui/images/icons/check-progressive.svg');
 370   background-image: -o-linear-gradient(transparent, transparent), url('themes/wikimediaui/images/icons/check-progressive.png');
 371   background-size: contain;
 372 }
 373 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
 374   background-color: rgba(41, 98, 204, 0.1);
 375 }
 376 .oo-ui-menuToolGroup .oo-ui-tool-name-menuTool.oo-ui-tool-active {
 377   background-color: #eaf3ff;
 378 }
 379 .oo-ui-menuToolGroup.oo-ui-widget-disabled,
 380 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
 381   color: #72777d;
 382 }
 383 .oo-ui-toolbar {
 384   clear: both;
 385 }
 386 .oo-ui-toolbar-bar {
 387   line-height: 1;
 388   position: relative;
 389 }
 390 .oo-ui-toolbar-tools,
 391 .oo-ui-toolbar-actions {
 392   -webkit-touch-callout: none;
 393   -webkit-user-select: none;
 394   -moz-user-select: none;
 395   -ms-user-select: none;
 396   user-select: none;
 397 }
 398 .oo-ui-toolbar-tools {
 399   display: inline;
 400   white-space: nowrap;
 401 }
 402 .oo-ui-toolbar-narrow .oo-ui-toolbar-tools,
 403 .oo-ui-toolbar-tools .oo-ui-tool {
 404   white-space: normal;
 405 }
 406 .oo-ui-toolbar-actions {
 407   float: right;
 408 }
 409 .oo-ui-toolbar-actions .oo-ui-toolbar {
 410   display: inline-block;
 411 }
 412 .oo-ui-toolbar-actions .oo-ui-popupWidget {
 413   -webkit-touch-callout: default;
 414   -webkit-user-select: all;
 415   -moz-user-select: all;
 416   -ms-user-select: all;
 417   user-select: all;
 418 }
 419 .oo-ui-toolbar-bar {
 420   background-color: #fff;
 421   color: #222;
 422 }
 423 .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
 424   border-bottom: 1px solid #c8ccd1;
 425   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
 426 }
 427 .oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
 428   border-top: 1px solid #c8ccd1;
 429   box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.1);
 430 }
 431 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
 432   background-color: transparent;
 433   border: 0;
 434   box-shadow: none;
 435 }
 436 .oo-ui-toolbar-narrow-bar:after {
 437   content: '';
 438   display: block;
 439   position: absolute;
 440   top: 3.125em;
 441   left: 0;
 442   width: 100%;
 443   height: 0;
 444 }
 445 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar:after {
 446   border-bottom: 1px solid #c8ccd1;
 447 }
 448 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar:after {
 449   border-top: 1px solid #c8ccd1;
 450 }
 451 .oo-ui-toolbar-actions .oo-ui-buttonElement {
 452   margin-right: 0;
 453 }
 454 .oo-ui-toolbar-actions .oo-ui-buttonElement > .oo-ui-buttonElement-button {
 455   border: 0;
 456   border-radius: 0;
 457   padding-top: 3.125em;
 458   padding-left: 1.25em;
 459   padding-right: 1.25em;
 460 }
 461 .oo-ui-toolbar-narrow .oo-ui-toolbar-actions .oo-ui-buttonElement > .oo-ui-buttonElement-button {
 462   padding-left: 0.9375em;
 463   padding-right: 0.9375em;
 464 }
 465 .oo-ui-toolbar-actions .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
 466   padding-top: 1.015625em;
 467   padding-bottom: 0.9375em;
 468 }
 469 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
 470   border-radius: 0;
 471 }
 472 .oo-ui-toolbar-actions > .oo-ui-toolbar:not( :last-child ) {
 473   border-right: 1px solid #c8ccd1;
 474 }