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

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